Question

任何人都可以使用JQuery Toggle帮助解决这个问题吗？我尽我所能，但却无法让它发挥作用。

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

非常感谢您的任何帮助。

**更新发布。只有主菜单项（class =＆＃34; mc＆＃34;）负责切换菜单。子菜单只是链接（这就是为什么我定位class =＆＃34; mc＆＃34;仅在点击时）。主菜单项可能并不总是具有2级项目。

JS FIddle： 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作为其子

的锚元素

＆＃13;

// 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();
 });

＆＃13;

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

＆＃13;

使用JQuery Toggle时出现问题

1 个答案: