Bootstrap 3 仍在 RC 中，但我只是在尝试实现它。我不知道如何放置子菜单类。即使在 css 中没有类，甚至新文档也没有说什么
它在 2.x 中，类名作为下拉子菜单
问问题
450686 次
9 回答
590
引导程序 5（2021 年更新）
添加一些 JavaScript 以防止子菜单在父下拉菜单打开时关闭。这可以通过切换display:block...
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'
})
})
Bootstrap 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;
}
Bootstrap 5 导航栏下拉悬停子菜单（仅限 CSS）
引导程序 4（2018 年更新）
已dropdown-submenu在 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（最终版）的示例：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>
PS - 导航栏中调整左侧位置的示例：http: //bootply.com/92442
于 2013-08-02T19:43:15.583 回答
63
@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/
于 2013-09-08T10:31:29.573 回答
44
直到今天（2014 年 1 月 9 日），Bootstrap 3 仍然不支持子菜单下拉菜单。
我在谷歌上搜索了响应式导航菜单，发现这是我最好的。
这是智能菜单 http://www.smartmenus.org/
我希望这是任何想要具有多级子菜单的导航菜单的人的出路。
更新 2015-02-17 智能菜单现在完全支持子菜单的 Bootstrap 元素样式。有关更多信息，请查看智能菜单网站。
于 2014-01-09T06:55:46.430 回答
5
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：从背景颜色：#eeeeee 到背景颜色：#c5c5c5 - 白色字体和浅色背景看起来不太好。
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #c5c5c5;
border-color: #428bca;
}
我希望这能像对我一样帮助人们！
但我希望 Bootstrap 尽快添加 subs 功能。
于 2013-09-29T10:25:43.833 回答
4
评论Skelly 真正有用的解决方法：在 Bootstrap-sass 3.3.6，utilities.scss，第 19 行：.pull-left有float:left !important. 从那以后，我建议在他的 CSS 中也使用 !important ：
.dropdown-submenu.pull-left {
float:none !important;
}
于 2016-01-13T08:45:34.630 回答
2
几天前我碰到了这个问题。我尝试了许多解决方案，但最终没有一个真正适合我，我最终创建了引导程序下拉代码的扩展/覆盖。它是对 closeMenus 函数进行更改的原始代码的副本。
我认为这是一个很好的解决方案，因为它不会影响引导 js 的核心类。
您可以在 gihub 上查看：https ://github.com/djokodonev/bootstrap-multilevel-dropdown
于 2014-02-17T16:31:48.763 回答
2
使用 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>
于 2021-06-17T07:48:54.257 回答
0
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">The Providers</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li ><a href="#">Home</a></li>
<li id="course" class="dropdown" ><a href="#">Courses<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">SEO</a></li>
<li><a href="#">A.I</a></li>
<li><a href="#">M.L</a></li>
<li><a href="#">Graphics</a></li>
<li id="sub-dropdown" class="dropdown"><a href="#">web Design<span style="margin-left: 43px;" class="glyphicon glyphicon-chevron-right"></span> </a>
<ul id="sub-dropdown-menu" class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap 3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Angular</a></li>
</ul>
</li>
</li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Policy</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS
body{
font-family: monospace;
outline: none;
background-image: url(image.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
.navbar-inverse{
background-color: #2a84eb ;
border-color: transparent;
}
.navbar-inverse .navbar-brand{
color: #fff;
font-size: 30px;
margin-right: 40px;
}
#myNavbar .navbar-nav li a{
color: #fff;
font-size: 19px;
}
#myNavbar #course{
transition: all 0.3s ease-in-out;
}
#myNavbar #course:hover{
background-color:#0751a6;
}
.dropdown-menu{
display: none;
position: absolute;
background-color: #f0f0f0;
box-shadow: 2px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#sub-dropdown-menu{
display: none;
position: absolute;
background-color: #f0f0f0;
margin-left: 186px;
margin-top: -26px;
}
#sub-dropdown-menu a , .dropdown-menu a {
color: #000 !important;
font-size: 16px !important;
}
.dropdown:hover .dropdown-menu {display: block;transition: all 0.5s ease-in-out;}
.dropdown .dropdown-menu a:hover{background-color: #c9c7c7;}
#sub-dropdown:hover #sub-dropdown-menu {display: block;}
于 2021-10-15T12:09:43.983 回答
-2
我为下拉菜单制作了另一个解决方案。希望这有帮助只需添加这个js脚本
<script type="text/javascript"> jQuery("document").ready(function() {
jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
e.preventDefault();
e.stopPropagation();
if (jQuery(this).hasClass('open2'))
jQuery(this).removeClass('open2');
else {
jQuery(this).addClass('open2');
}
});
}); < /script>
<style type="text/css">.open2{display:block; position:relative;}</style>
于 2014-01-14T11:36:59.787 回答