JQuery селектор, включая атрибуты и родственные селекторы, не работает - PullRequest
Новая
       9

JQuery селектор, включая атрибуты и родственные селекторы, не работает

0 голосов
/ 19 мая 2019

У меня есть мобильное меню, которое открывается при нажатии на значок.Большинство ссылок меню ведут на другие страницы, но есть также локальные ссылки с атрибутами href='#xxxx', с одинаковыми идентификаторами страниц в качестве целевого объекта ссылки.

Открытие и закрытие меню инициируетсяСкрипт jQuery, который работает при нажатии значка (во фрагменте ниже: красный квадрат).

При нажатии на локальную ссылку, ведущую к идентификатору, расположенному ниже на странице, меню остается открытым, что не должнот.Я пытался добавить скрипт, чтобы закрыть меню, когда щелкнул любой пункт меню, но селектор в этом скрипте, похоже, не работает.

Вот нерабочая версия - обратите внимание на селектор jQuery, сочетающий селектор атрибута и родственный селектор с другими .Это только мобильная версия, я пропустил все медиазапросы.

Примечание: тот же самый селектор работает в CSS (последнее правило):

(Кстати: HTML-код для менюгенерируется Wordpress) 

//Toggle mobile menu when clicking on the nav icon
jQuery('#navicon_1').on('click', function() {
  jQuery('#main_nav').slideToggle(300);
  jQuery(this).attr("aria-expanded", function(i, attr) { //change expanded-status 
    return attr === 'true' ? 'false' : 'true';
  });
});

//close mobile menu when clicking any menu icon
jQuery("#navicon_1[aria-expanded='true'] + #main_nav ul li.menu-item").on('click', function() {
  //alert("SHOULD WORK NOW");
  jQuery('#main_nav').hide(); //close menu
  jQuery('#navicon_1').attr("aria-expanded", function(i, attr) { //change expanded-status 
    return attr === 'true' ? 'false' : 'true';
  });
});
* {
  box-sizing: border-box;
}

#navicon_1 {
  position: absolute;
  right: 50px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: block;
  border: none;
  background: red;
  text-indent: -5000px;
}

#main_nav {
  display: none;
  position: absolute;
  margin-right: -30px;
  top: 40px;
  overflow-y: auto;
  right: 40px;
  padding: 0 0 0 0;
  background: #fff;
  -webkit-box-shadow: -2px 10px 10px #aeaeae;
  box-shadow: -2px 10px 10px #aeaeae;
}

#main_nav>ul {
  width: 230px;
  bottom: 0;
  text-align: left;
  padding: 8px 0 8px 10px;
}

#main_nav>ul li {
  font-size: 17px;
  display: block;
  width: 100%;
  line-height: 1.6;
  padding: 4px 6px 4px 8px;
  background: #eee;
}

#navicon_1[aria-expanded='true']+#main_nav ul li.menu-item {
  background: #fb6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar_top">
  <div id="navicon_1" role="button" aria-expanded="false" aria-label="click to open and close the menu" tabindex="0">
  </div>
  <nav role="navigation" id="main_nav" tabindex="0">
    <ul id="menu-hauptmenue" class="menu">
      <li id="menu-item-157" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-157"><a href="#">Menu 1</a></li>
      <li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"><a href="#">Menu 2</a></li>
      <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a href="#">Menu 3</a></li>
      <li id="menu-item-324" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-324"><a href="#">Menu 4</a></li>
      <li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-176"><a href="#">Menu 5</a></li>
    </ul>
  </nav>
</div>

А вот версия, в которой селектор упрощен, исключая атрибут и родственные селекторы.Это работает: когда вы нажимаете на любой из пунктов меню, меню закрывается.

Но мне нужно ограничить функцию ситуацией, когда #navicon_1 имеет статус «aria-extended = true» - в противном случае меню исчезает на рабочем столе при нажатии локальной ссылки: 

//Toggle mobile menu when clicking on the nav icon
jQuery('#navicon_1').on('click', function() {
  jQuery('#main_nav').slideToggle(300);
  jQuery(this).attr("aria-expanded", function(i, attr) { //change expanded-status 
    return attr === 'true' ? 'false' : 'true';
  });
});

jQuery("#main_nav ul li.menu-item").on('click', function () {
	//alert("SHOULD WORK NOW");
  jQuery('#main_nav').hide();//close menu
		jQuery('#navicon_1').attr("aria-expanded", function(i, attr) {//change expanded-status 
        return attr === 'true' ? 'false' : 'true';
    });
});
* {
  box-sizing: border-box;
}

#navicon_1 {
  position: absolute;
  right: 50px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: block;
  border: none;
  background: red;
  text-indent: -5000px;
}

#main_nav {
  display: none;
  position: absolute;
  margin-right: -30px;
  top: 40px;
  overflow-y: auto;
  right: 40px;
  padding: 0 0 0 0;
  background: #fff;
  -webkit-box-shadow: -2px 10px 10px #aeaeae;
  box-shadow: -2px 10px 10px #aeaeae;
}

#main_nav>ul {
  width: 230px;
  bottom: 0;
  text-align: left;
  padding: 8px 0 8px 10px;
}

#main_nav>ul li {
  font-size: 17px;
  display: block;
  width: 100%;
  line-height: 1.6;
  padding: 4px 6px 4px 8px;
  background: #eee;
}

#navicon_1[aria-expanded='true']+#main_nav ul li.menu-item {
  background: #fb6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar_top">
  <div id="navicon_1" role="button" aria-expanded="false" aria-label="click to open and close the menu" tabindex="0">
  </div>
  <nav role="navigation" id="main_nav" tabindex="0">
    <ul id="menu-hauptmenue" class="menu">
      <li id="menu-item-157" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-157"><a href="#">Menu 1</a></li>
      <li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"><a href="#">Menu 2</a></li>
      <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a href="#">Menu 3</a></li>
      <li id="menu-item-324" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-324"><a href="#">Menu 4</a></li>
      <li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-176"><a href="#">Menu 5</a></li>
    </ul>
  </nav>
</div>

1 Ответ

1 голос
/ 19 мая 2019

Когда назначается этот новый обработчик событий, этому элементу не присваивается этот атрибут этому значению (поэтому фактически он завершается с ошибкой, потому что селектор не соответствует ни одному элементу).Решение состоит в том, чтобы либо присоединить его и проверить значение атрибута в обработчике, либо использовать делегирование события.

Вот как проверить значение: 

jQuery("#navicon_1 + #main_nav ul li.menu-item").on('click', function() {
  if(!jQuery("#navicon_1").is("[aria-expanded='true']")) return;
  jQuery('#main_nav').hide(); //close menu
  jQuery('#navicon_1').attr("aria-expanded", function(i, attr) { //change expanded-status 
    return attr === 'true' ? 'false' : 'true';
  });
});

Вот как использовать делегирование события: 

jQuery("#navicon_1").parent().on('click', "#navicon_1[aria-expanded='true'] + #main_nav ul li.menu-item", function() {
  jQuery('#main_nav').hide(); //close menu
  jQuery('#navicon_1').attr("aria-expanded", function(i, attr) { //change expanded-status 
    return attr === 'true' ? 'false' : 'true';
  });
});

Вот документация для метода jQuery "on".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...