Bootstrap 4 Menu: close all flyout menus when top menu item is closed

Question

This is a non-standard Bootstrap 4 menu with 3 levels. The third level menus are controlled by jQuery, and the problem is that they stay open after the top menu item is closed. I'm also using jQuery to remove the need to click on the menus to show the sub-menus. It's sort of a mess. And I can't really change the HTML as it is output by a menu walker.

Question: how can I close all flyout menu items and their submenus (like 27028) when the top level menu item (3381) is closed?

Question: And how I can remove the redundant click on a menu item (like 27028) to show submenu items?

Here's a fiddle: https://jsfiddle.net/s04ezjhr/


Human Resources 

Test Link
HR Reports 

Change Of Status
Failure To Start
Intent To Hire

This is the jQuery that currently controls the third level menu items and the "show on hover" submenus:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');

  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show");
  });
  return false;
});


function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

Lasithds · Accepted Answer

Problem in the current script is that it opens all drop-down menus when you hover it. You can easily fix this by limiting it top open only immediate child dropdown menu.

function toggleDropdown(e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('> .dropdown-menu', _d);
  setTimeout(function() {
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave', '.dropdown', toggleDropdown)








  
    
            Human Resources
            
            
        
    
      
        
                    Test Link
                
      
      
        
                    HR Reports
                    
                    
                
        
          
            
                            Change Of Status
                        
          
          
            
                            Failure To Start
                        
          
          
            
                            Intent To Hire

Bootstrap 4 Menu: close all flyout menus when top menu item is closed

Answers (2)

Related Questions