jQuery 选择器，包括属性和同级选择器不起作用

Posted 2023-05-09

【中文标题】jQuery 选择器，包括属性和同级选择器不起作用

【英文标题】：jQuery selector including attribute and sibling selectors not working

【发布时间】：2019-10-06 04:21:54

【问题描述】：

我有一个移动菜单，当单击图标时会打开。大多数菜单链接指向其他页面，但也有带有href='#xxxx' 属性的本地链接，它们的链接目标是相同的页面ID。

菜单的打开和关闭由一个 jQuery 脚本触发，该脚本在单击图标时起作用（在下面的 sn-p 中：红色方块）。

当点击指向页面下方 ID 的本地链接时，菜单会保持打开状态，这是不应该的。我尝试添加一个脚本以在单击任何菜单项时关闭菜单，但该脚本中的选择器似乎不起作用。

这是非工作版本 - 请注意 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-expanded=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】：

当分配新的事件处理程序时，该元素没有将该属性设置为该值（因此实际上它会静默失败，因为选择器无法匹配任何元素）。解决方案是附加它并在处理程序中检查属性的值或使用事件委托。

查看值的方法如下：

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';
  );
);

Here's the documentation for jQuery's "on" method.

【讨论】：

第二种解决方案有效 - 谢谢！第一个没有 - 必须与那行 if(!jQuery("#navicon_1).is("[aria-expanded='true']")) return; 有关 - 我猜 if 语句缺少一些花括号。 （添加它们时我不确定如何处理return）

不客气。在 JS 中，当条件或循环的代码块中只有一条语句时，可以省略花括号。第一个示例不起作用，因为缺少双引号。