引导程序4: 导航内部的多级下拉

小开

The following is MultiLevel dropdown based on bootstrap4. I tried it was according to the bootstrap4 basic dropdown.

.dropdown-submenu{
position: relative;
}
.dropdown-submenu a::after{
transform: rotate(-90deg);
position: absolute;
right: 3px;
top: 40%;
}
.dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{
display: flex;
flex-direction: column;
position: absolute !important;
margin-top: -30px;
left: 100%;
}
@media (max-width: 992px) {
.dropdown-menu{
width: 50%;
}
.dropdown-menu .dropdown-submenu{
width: auto;
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Something else here</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">b</a>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>

小开

最佳答案

I use the following piece of CSS and JavaScript. It uses an extra class dropdown-submenu. I tested it with Bootstrap 4 beta.

It supports multi level sub menus.

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

.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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>




<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>






</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>

小开

I found this multidrop-down menu which work great in all device.

Also, have hover style

It supports multi-level submenus with bootstrap 4.

$( document ).ready( function () {
$( '.navbar a.dropdown-toggle' ).on( 'click', function ( e ) {
var $el = $( this );
var $parent = $( this ).offsetParent( ".dropdown-menu" );
$( this ).parent( "li" ).toggleClass( 'show' );


if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
$el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
}
$( '.navbar-nav li.show' ).not( $( this ).parents( "li" ) ).removeClass( "show" );
return false;
} );
} );

.navbar-light .navbar-nav .nav-link {
color: rgb(64, 64, 64);
}
.btco-menu li > a {
padding: 10px 15px;
color: #000;
}


.btco-menu .active a:focus,
.btco-menu li a:focus ,
.navbar > .show > a:focus{
background: transparent;
outline: 0;
}


.dropdown-menu .show > .dropdown-toggle::after{
transform: rotate(-90deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<nav class="navbar navbar-toggleable-md navbar-light bg-faded btco-menu">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>


<li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>

小开

Updated 2018

Here is another variation on the Bootstrap 4.1 Navbar with multi-level dropdown. This one uses minimal CSS for the submenu, and can be re-positioned as desired:

https://codeply.com/go/nG6iMAmI2X

.dropdown-submenu {
position: relative;
}


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

jQuery to control display of submenus:

$('.dropdown-submenu > a').on("click", function(e) {
var submenu = $(this);
$('.dropdown-submenu .dropdown-menu').removeClass('show');
submenu.next('.dropdown-menu').addClass('show');
e.stopPropagation();
});


$('.dropdown').on("hidden.bs.dropdown", function() {
// hide any open menus when parent closes
$('.dropdown-menu.show').removeClass('show');
});

See this answer for activating the Bootstrap 4 submenus on hover

小开

This one works on Bootstrap 4.3.1.

Jsfiddle: https://jsfiddle.net/ko6L31w4/1/

The HTML code might be a little bit messy because I create a slightly complex dropdown menu for comprehensive test, otherwise everything is pretty straight forward.

Js includes fewer ways to collapse opened dropdowns and CSS only includes minimal styles for full functionalities.

$(function() {
$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
    

//method 1: remove show from sibilings and their children under your first parent
    

/* 		if (!$(this).next().hasClass('show')) {
		      

$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
}  */
     

     

//method 2: remove show from all siblings of all your parents
$(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show");
    

$(this).siblings().toggleClass("show");
    

    

//collapse all after nav is closed
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});


});
});

.dropdown-submenu {
position: relative;
}


.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>




<nav class="navbar navbar-expand-md navbar-light bg-white py-3 shadow-sm">
<div class="container-fluid">
<a href="#" class="navbar-brand font-weight-bold">Multilevel Dropdown</a>
    

<button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>




<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
      

<!-- nav dropdown -->
<li class="nav-item dropdown">
        

<a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
            

<li><a href="#" class="dropdown-item">Some action</a></li>
            

<!-- lvl 1 dropdown -->
<li class="dropdown-submenu">
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 1</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">level 2</a></li>
                

<!-- lvl 2 dropdown -->
<li class="dropdown-submenu">
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">level 3</a></li>
                    

<!-- lvl 3 dropdown -->
<li class="dropdown-submenu">
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 3</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">level 4</a></li>
</ul>
</li>
                    

</ul>
</li>


<li><a href="#" class="dropdown-item">level 2</a></li>
<li><a href="#" class="dropdown-item">level 2</a></li>
</ul>
</li>
            

<li><a href="#" class="dropdown-item">Some other action</a></li>
            

<li class="dropdown-submenu">
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 1</a>
<ul class="dropdown-menu">
                

<li class="dropdown-submenu">
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">level 3</a></li>
<li><a href="#" class="dropdown-item">level 3</a></li>
</ul>
</li>
                

<li class="dropdown-submenu">
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">level 3</a></li>
<li><a href="#" class="dropdown-item">level 3</a></li>
</ul>
</li>


<li><a href="#" class="dropdown-item">level 2</a></li>
                

<li class="dropdown-submenu">
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">level 3</a></li>
<li><a href="#" class="dropdown-item">level 3</a></li>
</ul>
</li>
                

<li><a href="#" class="dropdown-item">level 2</a></li>
</ul>
</li>
</ul>
</li>


<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>

小开

Using official HTML without adding extra CSS styles and classes, it's like native support.

Just add the following code:

$.fn.dropdown = (function() {
var $bsDropdown = $.fn.dropdown;
return function(config) {
if (typeof config === 'string' && config === 'toggle') { // dropdown toggle trigged
$('.has-child-dropdown-show').removeClass('has-child-dropdown-show');
$(this).closest('.dropdown').parents('.dropdown').addClass('has-child-dropdown-show');
}
var ret = $bsDropdown.call($(this), config);
$(this).off('click.bs.dropdown'); // Turn off dropdown.js click event, it will call 'this.toggle()' internal
return ret;
}
})();


$(function() {
$('.dropdown [data-toggle="dropdown"]').on('click', function(e) {
$(this).dropdown('toggle');
e.stopPropagation();
});
$('.dropdown').on('hide.bs.dropdown', function(e) {
if ($(this).is('.has-child-dropdown-show')) {
$(this).removeClass('has-child-dropdown-show');
e.preventDefault();
}
e.stopPropagation();
});
});

Dropdown of bootstrap can be easily changed to infinite level. It's a pity that they didn't do it.

BTW, a hover version: https://github.com/dallaslu/bootstrap-4-multi-level-dropdown

Here is a perfect demo: https://jsfiddle.net/dallaslu/adky6jvs/ (works well with Bootstrap v4.4.1)

小开

There's an easier way to do this. I'm using bootstrap 5 but i think it works also on bootstrap 4. You have to use "btn-group" class instead of "nav-item" class. And you don't have to code anything in jquery or create classes!. Check this snippet.

IMPORTANT: It seems better on full page!

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>


<body>
<nav class="navbar navbar-expand-xl navbar-dark bg-primary bg-gradient">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
                



                

<li class="btn-group">
<div class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</div>
<ul class="dropdown-menu">
<li>
<div class="btn-group dropend">
<button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
</li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</li>
<li class="btn-group">
<div class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</div>
<ul class="dropdown-menu">
<li>
<div class="btn-group dropend">
<button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
</li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>


</body>