使用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>