CSS Bootstrap 下拉子菜单丢失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18023493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dropdown sub menu missing
提问by DevC
Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn't figure out how to put a sub menu class. Even there is no class in css and even the new docs don't say anything about it
Bootstrap 3 仍处于 RC 阶段，但我只是想实现它。我不知道如何放置子菜单类。即使在 css 中没有类，甚至新的文档也没有对此进行任何说明
It was there in 2.x with class name as dropdown-submenu
它在 2.x 中，类名作为下拉子菜单
回答by Zim
Updated 2018
2018 年更新
The dropdown-submenuhas been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto..
该dropdown-submenu自举3 RC已被删除。用 Bootstrap 的作者 Mark Otto 的话来说..
"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342
“子菜单现在在网络上没有太多位置，尤其是移动网络。它们将在 3.0 中删除” - https://github.com/twbs/bootstrap/pull/6342
But, with a little extra CSS you can get the same functionality.
但是，通过一些额外的 CSS，您可以获得相同的功能。
Bootstrap 4(navbar submenu on hover)
Bootstrap 4（悬停时的导航栏子菜单）
.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 submenu dropdown hover
Navbar submenu dropdown hover (right aligned)
Navbar submenu dropdown click (right aligned)
Navbar dropdown hover (no submenu)
导航栏子菜单下拉悬停
导航栏子菜单下拉悬停（右对齐）
导航栏子菜单下拉单击（右对齐）
导航栏下拉悬停（无子菜单）
Bootstrap 3
引导程序 3
Here is an example that uses 3.0 RC 1: http://bootply.com/71520
这是使用 3.0 RC 1 的示例：http: //bootply.com/71520
Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684
这是一个使用 Bootstrap 3.0.0（最终版）的示例：http: //bootply.com/86684
CSS
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;
}
Sample Markup
示例标记
<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>
P.S. - Example in navbar that adjusts left position: http://bootply.com/92442
PS - 调整左侧位置的导航栏中的示例：http: //bootply.com/92442
回答by Shprink
@skelly solution is good but will not work on mobile devices as the hover state won't work.
@skelly 解决方案很好，但在移动设备上不起作用，因为悬停状态不起作用。
I have added a little bit of JS to get the BS 2.3.2 behavior back.
我添加了一些 JS 来恢复 BS 2.3.2 的行为。
PS: it will work with the CSS you get there: http://bootply.com/71520though you can comment the following part:
PS：它将与您获得的 CSS 一起使用：http: //bootply.com/71520虽然您可以评论以下部分：
CSS:
CSS：
/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/
JS:
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');
});
The result can be found on my WordPress theme (Top of the page): http://shprinkone.julienrenaux.fr/
结果可以在我的 WordPress 主题（页面顶部）中找到：http: //shprinkone.julienrenaux.fr/
回答by vee
Until today (9 jan 2014) the Bootstrap 3 still not support sub menu dropdown.
直到今天（2014 年 1 月 9 日）Bootstrap 3 仍然不支持子菜单下拉菜单。
I searched Google about responsive navigation menu and found this is the best i though.
我在谷歌上搜索了响应式导航菜单，发现这是我最好的。
It is Smart menushttp://www.smartmenus.org/
它是智能菜单http://www.smartmenus.org/
I hope this is the way out for anyone who want navigation menu with multilevel sub menu.
我希望这是任何想要带有多级子菜单的导航菜单的人的出路。
update 2015-02-17 Smart menus are now fully support Bootstrap element style for submenu. For more information please look at Smart menus website.
更新 2015-02-17 智能菜单现在完全支持子菜单的 Bootstrap 元素样式。有关更多信息，请查看智能菜单网站。
回答by WHOMEZz
Shprink's code helped me the most, but to avoid the dropdown to go off-screen i updated it to:
Shprink 的代码对我帮助最大，但为了避免下拉菜单离开屏幕，我将其更新为：
JS:
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 - white font & light background wasn't looking good.
CSS：从背景颜色：#eeeeee 到背景颜色：#c5c5c5 - 白色字体和浅色背景看起来不太好。
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #c5c5c5;
border-color: #428bca;
}
I hope this helps people as much as it did for me!
我希望这能像对我一样帮助人们！
But i hope Bootstrap add the subs feature back ASAP.
但我希望 Bootstrap 尽快添加 subs 功能。
回答by bencergazda
Comment to Skelly's really helpful workaround: in Bootstrap-sass 3.3.6, utilities.scss, line 19: .pull-lefthas float:left !important. Since that, I recommend to use !important in his CSS as well:
对Skelly 真正有用的解决方法的评论：在 Bootstrap-sass 3.3.6 中，utilities.scss, line 19: .pull-lefthas float:left !important. 从那以后，我建议在他的 CSS 中也使用 !important：
.dropdown-submenu.pull-left {
float:none !important;
}
回答by George Donev
I bumped with this issue a few days ago. I tried many solutions and none really worked for me on the end i ended up creating an extenion/override of the dropdown code of bootstrap. It is a copy of the original code with changes to the closeMenus function.
几天前我碰到了这个问题。我尝试了很多解决方案，但最终没有一个真正对我有用，我最终创建了引导程序下拉代码的扩展/覆盖。它是对 closeMenus 函数进行更改的原始代码的副本。
I think it is a good solution since it doesn't affects the core classes of bootstrap js.
我认为这是一个很好的解决方案，因为它不会影响 bootstrap js 的核心类。
You can check it out on gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown
你可以在 gihub 上查看：https: //github.com/djokodonev/bootstrap-multilevel-dropdown
回答by user3193801
I make another solution for dropdown. Hope this is helpfull Just add this js script
我为下拉列表制作了另一个解决方案。希望这有帮助 只需添加此 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>
