jQuery Navigation Menu with Multiple Submenu Dropdowns Closing Parent Menu Item

Question

I'm still just learning to use jQuery and I think my problem is a pretty easy fix for anyone that knows jQuery well.

I have some code I'm using for a navigation menu that I think works just how I want except this: The expanded parent menu items with children get closed when its child item with yet more children (submenu within submenu) is clicked/touched.

I do want expanded submenus to close other expanded submenus on the same level/scope. For example, I want the 'First Item+' link to close if it is expanded and a user clicks on the 'Second Item+' But, of course, what I don't want is for a child item with sub-items to close it's parent. I hope this makes sense. This is the code I'm using for the 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();


   });

I imagine the problem is where the code calls removeActiveClassFromAll.

Your help is greatly appreciated. Thanks so much and Merry Christmas/Happy Holidays!

Dallan Dallan · Accepted Answer · 2014-12-26T21:32:12

I'm surprised this didn't get any responses, at all. Anyway, for others who may need to solve this, I was able to figure the code out:

  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();
  });

That's it. Pretty simple.

.menu is parent <ul>

.menu-item-with-children is <li> with <ul> child/children

.sub-menu are <ul> within <li>

jQuery Navigation Menu with Multiple Submenu Dropdowns Closing Parent Menu Item

1 Answers