使用JQuery的问题切换

Question

任何人都可以请使用JQuery切换帮助解决这个问题吗？我尝试了所有我能做的，但却无法完成这项工作。

基本上我有一个菜单，有2个级别的子菜单。子级别被隐藏，直到主菜单项被点击。问题是，当一个主菜单项被点击时，只显示1级菜单 - 级别2从不显示。我已经尝试通过类名称和其他各种方法来实现这些目标，但他们只是拒绝按照我预期的方式显示。我下面有一个JS小提琴，非常感谢您的帮助。

非常感谢您的任何帮助。

**更新到帖子。只有主菜单项（class =“mc”）负责切换菜单。子菜单只是链接（这就是为什么我只是点击目标class =“mc”）。主菜单项目可能并不总是具有2级项目。

JS提琴： http://jsfiddle.net/Dunce/wdcwewhq/25/embedded/result/

<script> 
$(function(){ 

// hide all sub menu items on load. 
$("#lhsNav ul").hide(); 

$('.mc','#lhsNav').click(function(e){ 
    e.preventDefault(); //prevent default action 

    //show or hide all sub menu items for selected main menu item 
    $(this).nextAll().slideToggle(); 
    //$(this).next().slideToggle() 
    //$(this).find("ul").slideToggle(); 
}); 

}); 
<script> 
<ul id="lhsNav"> 
<li><a id="mc1" href="#" class="mc">Main Menu Item (Click To Toggle Sub Menus)</a> 
    <ul><li><a href="#" id="sc1" class="sc1">Sub Menu Level 1</a> 
      <ul><li><a href="#" id="sc2" class="sc2">-> Sub Menu Level 2</a></li></ul> 
     </li> 
    </ul> 
</li> 
<li><a id="mc2" href="#" class="mc">Main Menu Item (Click To Toggle Sub Menus)</a> 
    <ul><li><a href="#" id="sc3" class="sc1">Sub Menu Level 1</a> 
      <ul><li><a href="#" id="sc4" class="sc2">-> Sub Menu Level 2</a></li></ul> 
     </li> 
    </ul> 
</li> 
</ul> 

<p> 
This menu has 2 sub level categories - These are hidden on load. 
</p> 
<p> 
    When a Main Menu item is clicked, the idea is to show all of the sub menu items (level 1 and level 2), that belong to that main menu. The problem is that only sub menu level 1 items are being shown. Sub menu level 2 items are never seen/toggled - why not? What am I doing wrong? I have tried alternative ways of targetting the elements, but nothing works. 
</p> 

Answer 1

你只靶向元素与.mc类到哪里都是在子菜单中的没有这样的类。相反，你可以在li目标锚元素具有ul作为其子

// hide all sub menu items on load. 
 
$("#lhsNav .mc + ul").hide(); 
 

 
$('a.mc', '#lhsNav').click(function(e) { 
 
    e.preventDefault(); //prevent default action 
 

 
    //show or hide all sub menu items for selected main menu item 
 
    $(this).nextAll().slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="lhsNav"> 
 
    <li> 
 
    <a id="mc1" href="#" class="mc">Main Menu Item (Click To Toggle Sub Menus)</a> 
 
    <ul> 
 
     <li> 
 
     <a href="#" id="sc1" class="sc1">Sub Menu Level 1</a> 
 
     <ul> 
 
      <li> 
 
      <a href="#" id="sc2" class="sc2">-> Sub Menu Level 2</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> \t 
 
    <li> 
 
    <a id="mc2" href="#" class="mc">Main Menu Item (Click To Toggle Sub Menus)</a> 
 
    <ul> 
 
     <li> 
 
     <a href="#" id="sc3" class="sc1">Sub Menu Level 1</a> 
 
     <ul> 
 
      <li> 
 
      <a href="#" id="sc4" class="sc2">-> Sub Menu Level 2</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> \t 
 
</ul> 
 

 
<p> 
 
    This menu has 2 sub level categories - These are hidden on load. 
 
</p> 
 
<p> 
 
    When a Main Menu item is clicked, the idea is to show all of the sub menu items (level 1 and level 2), that belong to that main menu. The problem is that only sub menu level 1 items are being shown. Sub menu level 2 items are never seen/toggled - why not? What am I doing wrong? I have tried alternative ways of targetting the elements, but nothing works. 
 
</p>