jquery - jQuery 选择器,包括属性和同级选择器不起作用
问题描述
我有一个移动菜单,单击图标时会打开。大多数菜单链接指向其他页面,但也有带有href='#xxxx'
属性的本地链接,以相同的页面 ID 作为链接目标。
菜单的打开和关闭由一个 jQuery 脚本触发,该脚本在单击图标时起作用(在下面的片段中:红色方块)。
当单击指向页面下方 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>
解决方案
当分配新的事件处理程序时,该元素没有将该属性设置为该值(因此实际上它会默默地失败,因为选择器无法匹配任何元素)。解决方案是附加它并检查处理程序中的属性值或使用事件委托。
以下是检查值的方法:
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';
});
});
推荐阅读
- regex - 如何编写正则表达式以在指定位置删除和添加字符?
- symfony - 在为现有数据库创建实体和存储库后生成初始迁移
- sql - 如何在 SQL 中计算从星期六而不是星期日开始的周数
- verilog - 总是阻塞verilog中的阻塞分配?
- mapbox - 如何使用 csv2geojson 数据添加标记而不是圆圈
- python - 如何在没有 IronPython 的情况下将 C#(winforms 应用程序)、当前文本框文本传递给 Python 变量
- spring-data-jpa - QueryDSL 表达式正在抛出 *java.lang.UnsupportedOperationException: null* 异常
- c++ - 如何预编译不以 .h 结尾的 C++ 头文件
- java - 无法转换名称为 org.apache.hadoop.fs.FileSystem$Cache 的类。原因:org.apache.hadoop.fs.FileSystem$Cache$Key 类被冻结
- c# - Microsoft Visual Studio 显示“Table 一词附近使用了不正确的语法”