问题
I am working on building Multi-level(second level) drop-down.
The Drop-down works on Bootstrap-js version 4. But the drop-down not working in Bootstrap-5-beta.
The Working Bootstrap 4 version is provided here.
However, the Bootstrap-5-beta jsfiddle version the drop-downs not working with Bootstrap 5 Js.
The dropdown Works as I change bootstrap-5-js to bootstrap-4-js
Am I missing a class with jquery selector, any help would be appreciated.
Edit : Although both the answers works fine, but the drop-down does not close automatically. There could be some class or selector issue with Bootstrap 5
$( document ).ready( function () {
$( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
var $el = $( this );
$el.toggleClass('active-dropdown');
var $parent = $( this ).offsetParent( ".dropdown-menu" );
if ( !$( this ).next().hasClass( 'show' ) ) {
$( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
}
var $subMenu = $( this ).next( ".dropdown-menu" );
$subMenu.toggleClass( 'show' );
$( this ).parent( "li" ).toggleClass( 'show' );
$( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
$( '.dropdown-menu .show' ).removeClass( "show" );
$el.removeClass('active-dropdown');
} );
if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
$el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
}
return false;
} );
} );.dropdown-toggle.active-dropdown::after {
transform: rotate(-90deg);
}
body {
padding-top: 50px;
}
.navbar {
margin: 40px 0;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap NavBar</title>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-expand-md 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">
<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" href="#">Subsubmenu</a></li>
<li><a class="dropdown-item" href="#">Second subsubmenu</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu</a></li>
<li><a class="dropdown-item" href="#">Second subsubmenu 3</a></li>
</ul>
</li>
</ul>
</li>
<!-- Another Dropdown -->
<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" href="#">Subsubmenu</a></li>
<li><a class="dropdown-item" href="#">Second subsubmenu</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu</a></li>
<li><a class="dropdown-item" href="#">Second subsubmenu 3</a></li>
</ul>
</li>
</ul>
</li>
<!-- Another Dropdown -->
</ul>
</div>
</nav>
<div class="jumbotron">
<h1>Bootstrap 4 multi dropdown navbar</h1>
<p>This example of bootstrap 4 navigation with multi dropdown menu.</p>
</div>
</body>
</html>回答1:
All data-* attributes have been replaced with data-bs-* in Bootstrap 5. For details Bootstrap-5-official-docs. Also, look this answer of Codeply.
You need to change data-* to data-bs-* to work Bootstrap-5 Javascript. The Javascript selectors are changed in Bootstrap 5
In your example, change 4 classes with data-*. Updated Bootstrap-5-version fiddle
回答2:
Check migration docs for v5.0.0-beta1:
Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.
Change data-toggle and data-target attributes to data-bs-toggle and data-bs-target.
$( document ).ready( function () {
$( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
var $el = $( this );
$el.toggleClass('active-dropdown');
var $parent = $( this ).offsetParent( ".dropdown-menu" );
if ( !$( this ).next().hasClass( 'show' ) ) {
$( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
}
var $subMenu = $( this ).next( ".dropdown-menu" );
$subMenu.toggleClass( 'show' );
$( this ).parent( "li" ).toggleClass( 'show' );
$( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
$( '.dropdown-menu .show' ).removeClass( "show" );
$el.removeClass('active-dropdown');
} );
if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
$el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
}
return false;
} );
} );.dropdown-toggle.active-dropdown::after {
transform: rotate(-90deg);
}
body {
padding-top: 50px;
}
.navbar {
margin: 40px 0;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap NavBar</title>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<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="#" id="navbarDropdownMenuLink" data-bs-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" href="#">Subsubmenu</a></li>
<li><a class="dropdown-item" href="#">Second subsubmenu</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu</a></li>
<li><a class="dropdown-item" href="#">Second subsubmenu 3</a></li>
</ul>
</li>
</ul>
</li>
<!-- Another Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-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" href="#">Subsubmenu</a></li>
<li><a class="dropdown-item" href="#">Second subsubmenu</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu</a></li>
<li><a class="dropdown-item" href="#">Second subsubmenu 3</a></li>
</ul>
</li>
</ul>
</li>
<!-- Another Dropdown -->
</ul>
</div>
</nav>
<div class="jumbotron">
<h1>Bootstrap 4 multi dropdown navbar</h1>
<p>This example of bootstrap 4 navigation with multi dropdown menu.</p>
</div>
</body>
</html>来源：https://stackoverflow.com/questions/66098848/dropdown-working-with-bootstrap-4-not-working-with-bootstrap-5