Twitter的Bootstrap多级下拉菜单

是否有可能通过使用twitter引导2的元素有一个多层次的下拉菜单？ 原始版本没有这个function。

Answer 1

更新的答案

^{*更新了支持v2.1.1 **引导版本样式表的答案。}

^{**但要小心，因为此解决scheme已从v3中删除}

只是想指出，这个解决scheme不再需要了，因为最新的引导程序现在默认支持多级下拉菜单。 你仍然可以使用它，如果你使用的是旧版本，但是对于那些已经更新到最新版本（在编写本文时为v2.1.1）的用户来说，它已经不再需要了。 下面是从文档直接更新的默认多级下拉菜单：

http://jsfiddle.net/2Smgv/2858/

---

原始答复

在github支持的子菜单上有一些问题，通常由自举开发者closures，比如这个 ，所以我认为这是由开发人员使用bootstrap来解决的。 这里是一个演示，我放在一起告诉你如何可以一起工作的子菜单。

相关的代码

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; } 

创build我自己的.sub-menu类来应用到2级下拉菜单，这样我们可以将它们放在我们的菜单项旁边。 还修改了箭头以将其显示在子菜单组的左侧。

演示

Answer 2

[Twitter Bootstrap v3]

要在Twitter Bootstrap v3中创build一个n级下拉菜单（触控设备友好）

• jsfiddle演示的n级下拉菜单v3.0.0 | v3.1.1 | 3.3.0

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：

 <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> 

Answer 3

这个例子来自http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

适用于Bootstrap v3.1.1。

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

 .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; } 

Answer 4

我能够修复子菜单的始终固定在Andres的答案的父菜单的顶部以下加法：

 .dropdown-menu li { position: relative; } 

我还在包含菜单子菜单的项目上添加了一个图标“icon-chevron-right”，在hover时将图标从黑色更改为白色（以便将文本更改为白色，并使用选定的蓝色背景更好地显示）。

这是完整的更less/ css更改（replace上面这个）：

 .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"); } } } 

Answer 5

我刚刚添加class="span2"到下拉项目的<li>和工作。

Answer 6

由于Bootstrap 3删除了子菜单部分，我们需要适应自己的风格，我认为最好使用SmartMenu Bootstrap： https ： //vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

这将节省我们的时间在移动响应和风格。

这个插件也非常有前途。