Question

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

我的jQuery函数添加和删除'nav-open'类适用于第一级和第二级菜单项，但我仍然坚持如何进一步增加此功能以考虑第三级菜单项，第四级等

$(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，你可以看到每次打开子菜单时，我都会立即获得第三级，但我希望隐藏这些，直到个人点击二级菜单项。

感谢任何帮助！

Answer 1

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

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

http://jsfiddle.net/sv27e/

jQuery hasClass用于嵌套菜单项

1 个答案: