Bootstrap下拉子菜单丢失。
347
- DevC
4
2请注意，某些组件在版本3中已更改，包括菜单、导航和模态框。 - Deividi Cavarzan
11在我看来，BS3缺乏对这个（我认为非常有用的）功能的本地支持是我还没有转换的主要原因之一。虽然我同意它在移动设备上并不那么有用，并且现在他们采取了“移动优先”的方法，但删除已经实现的一个非常有用的桌面功能似乎是短视的。 - Andrew Brown
4同意移除预期功能是短视的做法。这种破坏性改变会让企业开发者一整天都不好过。 - RJB
要制作一个下拉菜单，只需使用CSS。http://codepen.io/Gothburz/pen/GpJKqP - Peter Girnus
11个回答
608
Bootstrap 5（2023年更新）
添加一些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 多级下拉菜单 - 悬停
Bootstrap 5 多级下拉菜单 - 悬停和动画过渡效果
或者，您可以使用此 CSS-only 方法来创建导航栏下拉菜单...
.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 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;
}
Navbar子菜单下拉悬停
右对齐的Navbar子菜单下拉悬停
右对齐的Navbar子菜单下拉点击
Navbar无子菜单下拉悬停
Bootstrap 3
这里有一个使用 Bootstrap 3 的示例：https://codeply.com/p/T9FWGhhL0S
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>
附言 - 导航栏中调整左侧位置的示例：https://codeply.com/p/XEiERVGcmz
- Zim
15
5好的，谢谢。我已经将它添加到我的主题样式表中，只是从旧版本的Bootstrap中复制粘贴而来。http://wordpress.org/themes/bikaner - DevC
9例如，在显示子菜单时，为了正确显示父菜单项的背景悬停效果，请在css中添加以下行：
.dropdown-submenu:hover {background: #e2e1e1;} - Eduardo Moralles2我一直致力于尽可能简化事物，但在没有绕过多级导航的大型网站（如政府网站）上，这是必要的。 - Troy Templeman
1好的，我的解决方案使悬停效果起作用：https://www.codeply.com/go/nx97JyPRF7 请注意，在我的实际项目中，我不需要使用
setTimeout( , 100)。 - Polv显示剩余10条评论
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/
- Shprink
2
2这个解决方案没有考虑在桌面上保持悬停功能，也不能用于第二级子菜单。为了使其适用于更多级别的子菜单，请将最后两行更改为以下行：
$(this).closest(".dropdown-submenu").toggleClass("open");，这将打开/关闭链接菜单项。为了在桌面上保持悬停状态，需要检查浏览器视口宽度，并且每个站点都会有所不同。 - edhedges感谢您的代码。但是在手机上，您的代码有漏洞。 - jian dan
44
截至今日 (2014年1月9日)，Bootstrap 3仍不支持子菜单下拉。
我在谷歌上搜索关于响应式导航菜单的内容，发现这是我认为最好的解决方案。
它是智能菜单 http://www.smartmenus.org/
我希望这是任何想要具有多级子菜单的导航菜单的出路。
更新 2015-02-17 智能菜单现已完全支持 Bootstrap 元素样式的子菜单。更多信息请查看智能菜单网站。
- vee
6
我一直在尝试解决在PC上使用bootstrap悬停，并且在具有多个级别的平板电脑上单击的问题。您真是让我开心了！非常漂亮 - 使用的标记与bootstrap几乎相同。谢谢！ :) - Hippie
2这个解决方案是免费的、开源的，并且与 BootStrap 3 非常兼容。 - Patrick Desjardins
5太棒了！太容易了！关于Bootstrap 3集成的具体细节，请参见此处：http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html - manafire
2Smartmenus很好，但它只适用于导航栏，而不适用于简单的按钮下拉菜单。 - Nikolai Prokoschenko
这个解决方案可以解决问题，使菜单支持悬停和触摸操作，并且只需要使用默认的Bootstrap 3 HTML标记即可实现。非常棒的解决方案，透明且易于快速实施！ - Jpsy
@vee 我尝试了他的示例，但是我无法在移动设备和桌面上获得正确行为的样本。 要么它是在两者上悬停，要么在两者上单击。 这可能是一个更简单的解决方案，但是作为这样，它似乎更有限，个人而言，我宁愿坚持具有文档并且不需要额外的黑客才能使其按预期工作的代码。 - Lunyx
8
使用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>
- Seb33300
4
3不需要使用CSS，只需将
dropend类添加到第一个li元素中。请查看https://jsfiddle.net/tmedxnLq/。 - chris Frisina那对我有用，谢谢！ - MertHaddad
如果您深入超过一个级别，这似乎无法正常工作。 - dearsina
@chrisFrisina 点击子菜单项只会关闭子菜单，而不是像人们预期的那样关闭整个菜单。 - z-boss
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: 将 background-color 的值从 #eeeeee 改为 #c5c5c5 - 白色的字体和浅色背景不太协调。
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #c5c5c5;
border-color: #428bca;
}
我希望这篇文章能像对我一样对其他人有所帮助！但是我希望 Bootstrap 尽快恢复子标题功能。
- WHOMEZz
4
针对Skelly的非常有用的解决方法，我想留言：在Bootstrap-sass 3.3.6版本中的utilities.scss文件的第19行：.pull-left使用了float:left !important。因此，我建议在他的CSS中也使用!important：
.dropdown-submenu.pull-left {
float:none !important;
}
- bencergazda
2
我几天前遇到了这个问题。我尝试了很多解决方案，但最终没有一个真正适合我的。最后，我创建了一个bootstrap下拉菜单代码的扩展/覆盖。它是原始代码的副本，但更改了closeMenus函数。
我认为这是一个好的解决方案，因为它不影响bootstrap js的核心类。
您可以在Github上查看它：https://github.com/djokodonev/bootstrap-multilevel-dropdown
我认为这是一个好的解决方案，因为它不影响bootstrap js的核心类。
您可以在Github上查看它：https://github.com/djokodonev/bootstrap-multilevel-dropdown
- George Donev
0
这是我的解决方案（我使用Bootstrap 5）：
HTML
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();
});
- Oleksandr Potomkin
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;}
- PeterPazmandi
0
2022年的Bootstrap 5中，这个GitHub仓库中的JS代码是子菜单的终极解决方案：https://github.com/dallaslu/bootstrap-5-multi-level-dropdown。
- justadeveloper
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接