引导3仍然在RC，但我只是试图实现它。我不知道怎么放一个子菜单类。甚至css中没有类，甚至新的文档也没有提到它
2分钟就到了。用类名作为下拉菜单
当前回答
Shprink的代码对我帮助最大，但为了避免下拉菜单离开屏幕，我将其更新为:
JS:
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
var menu = $(this).parent().find("ul");
var menupos = $(menu).offset();
if (menupos.left + menu.width() > $(window).width()) {
var newpos = -$(menu).width();
menu.css({ left: newpos });
} else {
var newpos = $(this).parent().width();
menu.css({ left: newpos });
}
});
CSS: FROM background-color: #eeeeee TO background-color: #c5c5c5 -白色字体和浅色背景看起来不太好。
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #c5c5c5;
border-color: #428bca;
}
我希望这能像帮助我一样帮助别人!
但是我希望Bootstrap能尽快把subs功能加回来。
其他回答
随着Bootstrap 5，现在很容易实现下拉子菜单，而不需要使用任何javascript代码，这要感谢新的autoClose选项和dropend类。
现场演示:https://jsfiddle.net/b038kc2y/
.dropdown-menu .dropdown-menu {
top: -.5rem !important;
}
<div class="dropdown m-5">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="dropend">
<a class="dropdown-item" href="#" id="dropdownSubMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Submenu Action</a>
<ul class="dropdown-menu" aria-labelledby="dropdownSubMenuLink">
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
引导5(2023年更新)
添加一些JavaScript来防止子菜单在父菜单下拉菜单打开时关闭。这可以通过切换显示:块…
let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd)=>{
dd.addEventListener('click', function (e) {
var el = this.nextElementSibling
el.style.display = el.style.display==='block'?'none':'block'
})
})
引导5多级下拉单击 引导5多级下拉-悬停 Bootstrap 5多级下拉-悬停&动画过渡
或者，你可以使用这个CSS方法导航栏下拉菜单…
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
引导5导航栏下拉悬停子菜单(仅CSS)
引导4(2018年更新)
在Bootstrap 3 RC中，下拉菜单被移除。用Bootstrap作者Mark Otto的话来说。
“现在子菜单在网络上并没有太大的位置，尤其是在移动网络上。它们将在3.0中被删除”- https://github.com/twbs/bootstrap/pull/6342
但是，用一点额外的CSS，你可以得到相同的功能。
悬停时导航栏子菜单:
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
}
导航栏子菜单下拉悬停 导航栏子菜单下拉悬停(右对齐) 导航栏子菜单下拉单击(右对齐) 导航栏下拉悬停(无子菜单)
引导3
下面是一个使用3.0 RC 1的例子:http://bootply.com/71520
下面是一个使用Bootstrap 3.0.0 (final)的示例:http://bootply.com/86684
CSS
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
样品的标记
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link 1</a>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
附注-在导航栏中调整左侧位置的例子:http://bootply.com/92442
@skelly解决方案是很好的，但不会在移动设备上工作，因为悬停状态不会工作。
我添加了一点JS来得到BS 2.3.2的行为。
PS:它将与你得到的CSS一起工作:http://bootply.com/71520尽管你可以评论以下部分:
CSS:
/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/
JS:
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
});
结果可以在我的WordPress主题(页面顶部)上找到:http://shprinkone.julienrenaux.fr/
几天前我遇到了这个问题。我尝试了许多解决方案，没有一个真正为我工作在最后，我最终创建了一个扩展/覆盖下拉代码的引导。它是原始代码的副本，只是修改了closeMenus函数。
我认为这是一个很好的解决方案，因为它不影响bootstrap js的核心类。
你可以在gihub上查看:https://github.com/djokodonev/bootstrap-multilevel-dropdown
这是我的解决方案(我使用bootstrap 5):
HTML
<div class="btn-group dropend" role="group">
<button id="submenu" type="button" class="dropdown-item dropdown-toggle submenu" data-bs-toggle="dropdown" aria-expanded="false">
Menu Item
</button>
<div class="dropdown-menu" aria-labelledby="submenu">
<a class="dropdown-item">Submenu</a>
</div>
</div>
JS
$('.submenu').click(function(e){
e.preventDefault();
e.stopPropagation();
});
