css jQuery选择器包含属性和兄弟选择器不工作

ax6ht2ek  于 2023-10-21  发布在  jQuery
关注(0)|答案(1)|浏览(170)

我有一个移动的菜单，当一个图标被点击时会打开。大多数菜单链接指向其他页面，但也有一些具有href='#xxxx'属性的本地链接，其链接目标为相同的页面ID。
菜单的打开和关闭由jQuery脚本触发，该脚本在单击图标时工作（在下面的片段中：红色广场）。
当点击一个本地链接指向页面上更下方的ID时，菜单保持打开状态，这是不应该的。我试图添加一个脚本，当任何菜单项被单击时关闭菜单，但该脚本中的选择器似乎不起作用。
这里是非工作版本-注意jQuery选择器将属性选择器和兄弟选择器与其他选择器组合。这只是移动的版本，我省略了所有的媒体查询。
注意：在CSS中，同样的选择器也可以工作（最后一条规则）：
(BTW：菜单的HTML代码由WordPress生成）

  1. //Toggle mobile menu when clicking on the nav icon
  2. jQuery('#navicon_1').on('click', function() {
  3.   jQuery('#main_nav').slideToggle(300);
  4.   jQuery(this).attr("aria-expanded", function(i, attr) { //change expanded-status 
  5.     return attr === 'true' ? 'false' : 'true';
  6.   });
  7. });
  9. //close mobile menu when clicking any menu icon
  10. jQuery("#navicon_1[aria-expanded='true'] + #main_nav ul li.menu-item").on('click', function() {
  11.   //alert("SHOULD WORK NOW");
  12.   jQuery('#main_nav').hide(); //close menu
  13.   jQuery('#navicon_1').attr("aria-expanded", function(i, attr) { //change expanded-status 
  14.     return attr === 'true' ? 'false' : 'true';
  15.   });
  16. });
  1. * {
  2.   box-sizing: border-box;
  3. }
  5. #navicon_1 {
  6.   position: absolute;
  7.   right: 50px;
  8.   width: 32px;
  9.   height: 32px;
  10.   cursor: pointer;
  11.   display: block;
  12.   border: none;
  13.   background: red;
  14.   text-indent: -5000px;
  15. }
  17. #main_nav {
  18.   display: none;
  19.   position: absolute;
  20.   margin-right: -30px;
  21.   top: 40px;
  22.   overflow-y: auto;
  23.   right: 40px;
  24.   padding: 0 0 0 0;
  25.   background: #fff;
  26.   -webkit-box-shadow: -2px 10px 10px #aeaeae;
  27.   box-shadow: -2px 10px 10px #aeaeae;
  28. }
  30. #main_nav>ul {
  31.   width: 230px;
  32.   bottom: 0;
  33.   text-align: left;
  34.   padding: 8px 0 8px 10px;
  35. }
  37. #main_nav>ul li {
  38.   font-size: 17px;
  39.   display: block;
  40.   width: 100%;
  41.   line-height: 1.6;
  42.   padding: 4px 6px 4px 8px;
  43.   background: #eee;
  44. }
  46. #navicon_1[aria-expanded='true']+#main_nav ul li.menu-item {
  47.   background: #fb6;
  48. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <div id="navbar_top">
  3.   <div id="navicon_1" role="button" aria-expanded="false" aria-label="click to open and close the menu" tabindex="0">
  4.   </div>
  5.   <nav role="navigation" id="main_nav" tabindex="0">
  6.     <ul id="menu-hauptmenue" class="menu">
  7.       <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>
  8.       <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>
  9.       <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>
  10.       <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>
  11.       <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>
  12.     </ul>
  13.   </nav>
  14. </div>

这里有一个版本，选择器被简化了，去掉了属性和兄弟选择器。这一个工作：当您单击任何菜单项时，菜单将关闭。
但是我需要将该函数限制在#navicon_1具有“aria-expanded=true”状态的情况下-否则当单击本地链接时，菜单将在桌面上消失：

  1. //Toggle mobile menu when clicking on the nav icon
  2. jQuery('#navicon_1').on('click', function() {
  3.   jQuery('#main_nav').slideToggle(300);
  4.   jQuery(this).attr("aria-expanded", function(i, attr) { //change expanded-status 
  5.     return attr === 'true' ? 'false' : 'true';
  6.   });
  7. });
  9. jQuery("#main_nav ul li.menu-item").on('click', function () {
  10. 	//alert("SHOULD WORK NOW");
  11.   jQuery('#main_nav').hide();//close menu
  12. 		jQuery('#navicon_1').attr("aria-expanded", function(i, attr) {//change expanded-status 
  13.         return attr === 'true' ? 'false' : 'true';
  14.     });
  15. });
  1. * {
  2.   box-sizing: border-box;
  3. }
  5. #navicon_1 {
  6.   position: absolute;
  7.   right: 50px;
  8.   width: 32px;
  9.   height: 32px;
  10.   cursor: pointer;
  11.   display: block;
  12.   border: none;
  13.   background: red;
  14.   text-indent: -5000px;
  15. }
  17. #main_nav {
  18.   display: none;
  19.   position: absolute;
  20.   margin-right: -30px;
  21.   top: 40px;
  22.   overflow-y: auto;
  23.   right: 40px;
  24.   padding: 0 0 0 0;
  25.   background: #fff;
  26.   -webkit-box-shadow: -2px 10px 10px #aeaeae;
  27.   box-shadow: -2px 10px 10px #aeaeae;
  28. }
  30. #main_nav>ul {
  31.   width: 230px;
  32.   bottom: 0;
  33.   text-align: left;
  34.   padding: 8px 0 8px 10px;
  35. }
  37. #main_nav>ul li {
  38.   font-size: 17px;
  39.   display: block;
  40.   width: 100%;
  41.   line-height: 1.6;
  42.   padding: 4px 6px 4px 8px;
  43.   background: #eee;
  44. }
  46. #navicon_1[aria-expanded='true']+#main_nav ul li.menu-item {
  47.   background: #fb6;
  48. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <div id="navbar_top">
  3.   <div id="navicon_1" role="button" aria-expanded="false" aria-label="click to open and close the menu" tabindex="0">
  4.   </div>
  5.   <nav role="navigation" id="main_nav" tabindex="0">
  6.     <ul id="menu-hauptmenue" class="menu">
  7.       <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>
  8.       <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>
  9.       <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>
  10.       <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>
  11.       <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>
  12.     </ul>
  13.   </nav>
  14. </div>
css

1条答案

按热度按时间
nwsw7zdq

nwsw7zdq1#

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

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

下面是如何使用事件委托：

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

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

展开查看全部
赞(0）分享  回复(0）举报  2023-10-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com