JQuery Toggle을 사용할 때의 문제

Question

누구든지 JQuery Toggle을 사용하여이 문제를 해결할 수 있습니까? 내가 할 수있는 모든 것을 시도했지만이 일을 제대로 할 수는 없습니다.

기본적으로 하위 메뉴가 2 단계 인 메뉴가 있습니다. 기본 메뉴 항목을 클릭 할 때까지 하위 수준이 숨겨집니다. 문제는 주 메뉴 항목을 클릭하면 레벨 1 만 표시된다는 것입니다. 레벨 2는 표시되지 않습니다. 클래스 이름과 기타 다른 방법으로이를 타겟팅하려고했지만 단순히 기대했던대로 표시하지 않습니다. 나는 아래에 JS 피들 (fiddle)을 가지고 있으며 정말로 도움이 될만한 것에 감사 할 것입니다.

사전 도움을 주셔서 감사드립니다.

** 게시하려면 업데이트하십시오. 주 메뉴 항목 (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 요소와의를 표적으로하고 있습니다. 대신 당신의 자식으로 ul이있는 li 내에서 앵커 요소를 타겟팅 할 수 있습니다

// 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>