带有多个子菜单下拉菜单的 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 是 <li> 和 <ul> 孩子/孩子

.sub-menu 是<ul> 在<li> 内