jQuery 导航菜单，具有多个子菜单下拉列表，关闭父菜单项

Question

我仍然只是在学习使用jQuery，我认为我的问题对于任何了解jQuery的人来说都很容易解决。

我

有一些用于导航菜单的代码，我认为这些代码可以按照我想要的方式工作，除了这个：单击/触摸具有更多子菜单的子项（子菜单中的子菜单）时，带有子菜单的展开父菜单项将关闭。

我确实希望扩展的子菜单在同一级别/范围内关闭其他扩展的子菜单。例如，我希望"第一个项目+"链接在展开并且用户单击"第二个项目+"时关闭 但是，当然，我不希望的是带有子项目的子项目关闭其父项。我希望这是有道理的。这是我用于jQuery的代码：

function initMenu() {
       $('.sub-menu').hide(); // Start with sub-menus hidden
       $('.menu-item-has-children a').click(
       function () {
           var checkElement = $(this).next();
           if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
               $('.sub-menu:visible').slideToggle(260);
           }
           if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
               removeActiveClassFromAll();
               $(this).addClass("active");
               $('.sub-menu:visible').slideToggle(260);
               checkElement.slideToggle(260);
               return false;
           }
           if($(this).siblings('ul').length===0 && $(this).parent().parent().attr('id')==='nav')
           {
               removeActiveClassFromAll();
               $(this).addClass("active");
               $('.sub-menu:visible').slideToggle(260);
               return false;
           }
       });
   }
   function removeActiveClassFromAll() {
       $('.menu-item-has-children a').each(function (index) {
           $(this).removeClass("active");
       });
   }

   $(document).ready(function () {
       initMenu();
   });
   $('.menu').click(function (e)
   {
       e.stopPropagation();

   });

我想问题是代码调用removeActiveClassFromAll的地方。

非常感谢您的帮助。非常感谢，圣诞快乐/节日快乐！

Answer 1

我很

惊讶这根本没有得到任何回应。无论如何，对于可能需要解决此问题的其他人，我能够弄清楚代码：

  function initMenu() {
    $('.sub-menu').hide(); // Start with sub-menus hidden
    $('.menu-item-with-children a').click(function() {
      var checkElement = $(this).next();
      // When an `<a>` with a sub-menu that isn't visible is clicked (tapped)...
      if ((checkElement.is('.sub-menu')) && (!checkElement.is(':visible'))) {
        // Open the clicked (tapped) sub-menu of `<a>`
        $(this).addClass("active");
        checkElement.slideDown(165, 'linear');
        // Go to the other `<a>` elements of that sub-menu scope and close them
        // (without closing sub-menus of other scopes, above or below)
        $(this).parent().siblings("li").children("a").removeClass("active");
        $(this).parent().siblings("li").children("a").next(".sub-menu").slideUp(160, 'linear');
        return false;
      }
      if($(this).hasClass("active")) {
        $(this).removeClass("active");
        checkElement.slideUp(160, 'linear');
      }
    });
  } // End initMenu()
  initMenu();
  $('.menu').click(function (e) {
    e.stopPropagation();
  });

就是这样。很简单。

.menu是父<ul>

.menu-item-with-children与<ul>孩子一起<li>

.sub-menu <ul>在<li>