通过多级下拉菜单增强Bootstrap 4导航栏

一个小的jQuery脚本来增强 Bootstrap 4，可让您在常规的Bootstrap 4导航栏组件中插入无限级别的下拉菜单。

完全响应，并使用标准的Bootstrap 4导航栏和下拉标记构建。

如何使用它：

1.将多层下拉菜单添加到Bootstrap 4导航栏组件。

  Navbar
  
    
  
  

    

      

        Home (current)
      
      

        MenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
        
        

          
Action
          
Another action
          

            Submenu
            

              
Submenu action
              
Another submenu action
              

                Subsubmenu
                

                  
Subsubmenu action
                  
Another subsubmenu action
                
              
              

                Second subsubmenu
                

                  
Subsubmenu action
                  
Another subsubmenu action
                
              
            
          
        
      
    
  

2.子菜单所需的CSS样式。

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

3.必要的jQuery脚本，可在单击时切换子菜单。将以下JavaScript代码段复制并放置在jQuery库之后并完成。

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