用于嵌套菜单项的 jQuery hasClass答案

【问题标题】：jQuery hasClass for nested menu items用于嵌套菜单项的 jQuery hasClass
【发布时间】：2014-04-13 14:34:31
【问题描述】：

我正在尝试更多地了解 jQuery，而今天我正在尝试使用菜单结构。目前，我的菜单分为三个级别，现在我试图隐藏“子子菜单项”，直到访问者单击第二级菜单项。

我添加和删除“nav-open”类的 jQuery 函数适用于第一级和第二级菜单项，但我一直坚持如何进一步扩展此功能以解决第三级菜单项、第四级等问题.

$(document).ready(function(){
 $('ul.nav li').click(function(){
  if($(this).hasClass('nav-open'))
   {    
     $(this).removeClass('nav-open');
   }
   else
    {
     $('ul.nav li').removeClass('nav-open');
    $(this).addClass('nav-open');
    }
 });

});

我也尝试过使用 .toggleClass，但它允许我单击所有主菜单项而不关闭其他项，所以现在我认为这不是最好的方法。

$(document).ready(function(){
 $('ul.nav li').click(function(){
  $(this).toggleClass('nav-open');
  });
 });

我的工作演示目前位于jsFiddle，正如您每次打开子菜单时所看到的那样，我也立即获得了我的第三级，但我希望将这些隐藏起来，直到有人点击第二级菜单项。

感谢任何帮助！

【问题讨论】：

标签： jquery html css menu

【解决方案1】：

您可以使用 Toggle find() 和 first() 使用多个子级别深入了解您的菜单例如

  $('ul li a').click(function(){
     $(this).parent().find('ul').first().toggle();
  });

http://jsfiddle.net/sv27e/

【讨论】：

谢谢忍者，这对我的理解有很大帮助！