Question

我还在学习使用jQuery，我觉得我的问题对于那些了解jQuery的人来说非常简单。

我有一些我用于导航菜单的代码，我认为除了这个之外我的工作方式正常工作：带有子项的扩展父菜单项在点击其子项（子菜单中的子菜单）时会关闭/触摸。

我确实希望扩展子菜单关闭同一级别/范围内的其他扩展子菜单。例如，如果扩展并且用户点击“第二项+”，我希望“First Item +”链接关闭但是，当然，我不想要的是具有子项的子项目关闭它家长。我希望这是有道理的。这是我用于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>个孩子/孩子

{p> .sub-menu在<ul>

范围内<li>

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

1 个答案: