带有多个子菜单下拉菜单的 jQuery 导航菜单关闭父菜单项

Posted 2023-05-09

【中文标题】带有多个子菜单下拉菜单的 jQuery 导航菜单关闭父菜单项

【英文标题】：jQuery Navigation Menu with Multiple Submenu Dropdowns Closing Parent Menu Item

【发布时间】：2015-02-20 19:12:57

【问题描述】：

我仍然只是在学习使用 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的位置。

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

【参考方案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> 内