CSS Twitter Bootstrap 多级下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9758587/
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
Twitter Bootstrap Multilevel Dropdown Menu
提问by Hellnar
Is it possible to have a multi level dropdown menu by using the elements of twitter bootstrap 2? The original version doesn't have this feature.
是否可以使用 twitter bootstrap 2 的元素来创建多级下拉菜单？原版没有这个功能。
回答by Andres Ilich
Updated Answer
更新答案
* Updated answer which support the v2.1.1** bootstrap version stylesheet.
* 更新了支持 v2.1.1** 引导版本样式表的答案。
**But be careful because this solution has been removed from v3
**但要小心，因为此解决方案已从 v3 中删除
Just wanted to point out that this solution is not needed anymore as the latest bootstrap now supports multi-level dropdowns by default. You can still use it if you're on older versions but for those who updated to the latest (v2.1.1 at the time of writing) it is not needed anymore. Here is a fiddle with the updated default multi-level dropdown straight from the documentation:
只是想指出这个解决方案不再需要了，因为最新的引导程序现在默认支持多级下拉菜单。如果您使用的是旧版本，您仍然可以使用它，但对于那些更新到最新版本（在撰写本文时为 v2.1.1）的人来说，不再需要它了。这是直接从文档中更新的默认多级下拉列表的小提琴：
http://jsfiddle.net/2Smgv/2858/
http://jsfiddle.net/2Smgv/2858/
Original Answer
原答案
There have been some issues raised on submenu support over at github and they are usually closed by the bootstrap developers, such as this one, so i think it is left to the developers using the bootstrap to work something out. Here is a demo i put together showing you how you can hack together a working sub-menu.
在 github 上的子菜单支持上出现了一些问题，它们通常被引导程序开发人员关闭，例如这个，所以我认为它留给使用引导程序的开发人员来解决问题。这是我放在一起的演示，向您展示了如何将工作子菜单组合在一起。
Relevant code
相关代码
CSS
CSS
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
display: block;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
Created my own .sub-menuclass to apply to the 2-level drop down menus, this way we can position them next to our menu items. Also modified the arrow to display it on the left of the submenu group.
创建了我自己的.sub-menu类以应用于 2 级下拉菜单，这样我们就可以将它们放置在我们的菜单项旁边。还修改了箭头以将其显示在子菜单组的左侧。
回答by Chirayu Chiripal
[Twitter Bootstrap v3]
[Twitter Bootstrap v3]
To create a n-level dropdown menu (touch device friendly) in Twitter Bootstrap v3,
要在 Twitter Bootstrap v3 中创建 n 级下拉菜单（触摸设备友好），
CSS:
CSS：
.dropdown-menu>li /* To prevent selection of text */
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu
{
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.right-caret:after,.left-caret:after
{ content:"";
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
display: inline-block;
height: 0;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.right-caret:after
{ border-left: 5px solid #ffaf46;
}
.left-caret:after
{ border-right: 5px solid #ffaf46;
}
JQuery:
查询：
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
HTML:
HTML：
<div class="dropdown" style="position:relative">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Level 2</a></li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
</ul>
</div>
回答by fandasson
This example is from http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
这个例子来自http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Works for me in Bootstrap v3.1.1.
在 Bootstrap v3.1.1 中对我有用。
HTML
HTML
<div class="container">
<div class="row">
<h2>Multi level dropdown menu in Bootstrap 3</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#">Some action</a></li>
<li><a href="#">Some other action</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="#">Even More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
</ul>
</div>
</div>
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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.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;
}
回答by Sean Lynch
I was able to fix the sub-menu's always pinning to the top of the parent menu from Andres's answer with the following addition:
我能够修复子菜单总是固定在安德烈斯的回答中的父菜单顶部，并添加以下内容：
.dropdown-menu li {
position: relative;
}
I also add an icon "icon-chevron-right" on items which contain menu sub-menus, and change the icon from black to white on hover (to compliment the text changing to white and look better with the selected blue background).
我还在包含菜单子菜单的项目上添加了一个图标“icon-chevron-right”，并在悬停时将图标从黑色更改为白色（以补充文本更改为白色并在选定的蓝色背景下看起来更好）。
Here is the full less/css change (replace the above with this):
这是完整的 less/css 更改（用这个替换上面的）：
.dropdown-menu li {
position: relative;
[class^="icon-"] {
float: right;
}
&:hover {
// Switch to white icons on hover
[class^="icon-"] {
background-image: url("../img/glyphicons-halflings-white.png");
}
}
}
回答by E.G.
I just added class="span2"to the <li>for the dropdown items and that worked.
我刚刚添加class="span2"到<li>下拉项中，效果很好。
回答by Osify
Since Bootstrap 3 removed the submenu part and we need to adapt ourselves the style, I think it's better to go with SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
由于Bootstrap 3去掉了submenu部分，需要自己调整样式，我觉得还是用SmartMenu Bootstrap比较好：https: //vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
That would save us time on mobile responsive and style.
这将节省我们在移动响应和样式上的时间。
This plugin also very promising.
这个插件也很有前途。
