jQuery 3级扩展

Question

单击菜单上的第3级菜单不起作用。 这是工作。 Onclick第3级，点击时不会扩展。

我也只想扩展当前菜单项，因为它现在可以正常工作了。 只需扩展第3级。

 $('.menu-item-has-children').children('a').on('click', function(e) { e.preventDefault(); if ($(this).next('ul').is(':visible')) { $(this).removeClass('sub-active').next('ul').slideUp(250); } else { $('.menu-item-has-children > a').removeClass('sub-active').next('ul').slideUp(250); $(this).addClass('sub-active').next('ul').slideToggle(250); } }); 

 .wa-slide-in-nav a { display: block; padding: 5px 0; text-decoration: none; color: #393939; font-weight: 600; } .wa-slide-in-nav ul.sub-menu li a { color: #696969; font-weight: 400; } .wa-slide-in-nav li.menu-item-has-children > a:after { content: "\\f067"; font-family: "FontAwesome"; font-size: .6em; position: absolute; right: 2px; top: 30%; } .wa-slide-in-nav li.menu-item-has-children > a.sub-active:after { content: "\\f068"; font-family: "FontAwesome"; font-size: .6em; position: absolute; right: 2px; } .wa-slide-in-nav ul.sub-menu { display: none; margin: 0; padding: 0; position: relative; } .wa-slide-in-nav ul.sub-menu li { padding-left: 15px; } .wa-slide-in-nav li.selected > ul.sub-menu { display: block; } .wa-slide-in-nav li i { padding-right: 5px; } .wa-slide-in-nav > li >a{ text-transform: uppercase; position: relative; } .wa-slide-in-nav > li > ul.sub-menu > li > a { padding: 2px 0 2px; font-size: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class="wa-slide-in-nav"> <li class="menu-item-has-children"> <a href="#">Item</a> <ul class="sub-menu"> <li><a href="#">Item</a></li> <li class="menu-item-has-children"> <a href="#">Item 3rd level</a> <ul class="sub-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> </ul> </li> <li><a href="#">Item</a></li> <li class="menu-item-has-children"> <a href="#">Item</a> <ul class="sub-menu"> <li> <a href="#">Item</a></li> </ul> </li> </ul> 

Answer 1

因为在else语句中您编写了所有（.menu-item-has-children a），但是您只需要一个

试试这个希望就是你所需要的

 $('.menu-item-has-children a').click(function(e) { e.preventDefault(); if ($(this).hasClass( "sub-active" )) { $(this).removeClass('sub-active').next('ul').slideUp(250); } else { $(this).removeClass('sub-active').next('ul').slideUp(250); $(this).addClass('sub-active').next('ul').slideToggle(250); } }); 

 .wa-slide-in-nav a { display: block; padding: 5px 0; text-decoration: none; color: #393939; font-weight: 600; } .wa-slide-in-nav ul.sub-menu li a { color: #696969; font-weight: 400; } .wa-slide-in-nav li.menu-item-has-children > a:after { content: "\\f067"; font-family: "FontAwesome"; font-size: .6em; position: absolute; right: 2px; top: 30%; } .wa-slide-in-nav li.menu-item-has-children > a.sub-active:after { content: "\\f068"; font-family: "FontAwesome"; font-size: .6em; position: absolute; right: 2px; } .wa-slide-in-nav ul.sub-menu { display: none; margin: 0; padding: 0; position: relative; } .wa-slide-in-nav ul.sub-menu li { padding-left: 15px; } .wa-slide-in-nav li.selected > ul.sub-menu { display: block; } .wa-slide-in-nav li i { padding-right: 5px; } .wa-slide-in-nav > li >a{ text-transform: uppercase; position: relative; } .wa-slide-in-nav > li > ul.sub-menu > li > a { padding: 2px 0 2px; font-size: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class="wa-slide-in-nav"> <li class="menu-item-has-children"> <a href="#">Item</a> <ul class="sub-menu"> <li><a href="#">Item</a></li> <li class="menu-item-has-children"> <a href="#">Item 3rd level</a> <ul class="sub-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> </ul> </li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="menu-item-has-children"> <a href="#">Item</a> <ul class="sub-menu"> <li> <a href="#">Item</a></li> </ul> </li> </ul>