关于css：Twitter Bootstrap多级下拉菜单

Twitter Bootstrap Multilevel Dropdown Menu

通过使用twitter bootstrap 2的元素，是否可以有一个多级下拉菜单？原始版本没有此功能。

相关讨论

更新答案

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

**但要小心，因为此解决方案已从v3中删除。

只是想指出这个解决方案不再需要了，因为最新的引导现在默认支持多级下拉。如果您使用的是旧版本，您仍然可以使用它，但是对于那些更新到最新版本(在编写时是2.1.1版)的用户来说，不再需要它。以下是直接从文档中修改的默认多级下拉列表：

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

原始答案

在GitHub的子菜单支持上出现了一些问题，它们通常是由引导程序开发人员关闭的，比如这一个，所以我认为应该由使用引导程序的开发人员来解决问题。这是我放在一起的一个演示，向您展示如何将一个工作子菜单拼凑在一起。

相关讨论

[Twitter引导v3]

要在Twitter Bootstrap v3中创建N级下拉菜单(触控设备友好型)，请执行以下操作：

jfiddle演示n级下拉菜单v3.0.0 v3.1.1 v3.3.0

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

Click Here <span class="caret"></span>
<ul class="dropdown-menu">

<li>

Level 1
<ul class="dropdown-menu sub-menu">

<li>
Level 2
</li>

<li>

Level 2
<ul class="dropdown-menu sub-menu">

<li>
Level 3
</li>

<li>
Level 3
</li>

<li>

Level 3
<ul class="dropdown-menu sub-menu">

<li>
Level 4
</li>

<li>
Level 4
</li>

<li>
Level 4
</li>

</ul>

</li>

</ul>

</li>

<li>
Level 2
</li>

</ul>

</li>

<li>
Level 1
</li>

<li>
Level 1
</li>

</ul>

相关讨论

此示例来自http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

在bootstrap v3.1.1中为我工作。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

Multi level dropdown menu in Bootstrap 3

Dropdown <span class="caret"></span>

<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">

<li>
Some action
</li>

<li>
Some other action
</li>

<li class="divider">
</li>

<li class="dropdown-submenu">
Hover me for more options
<ul class="dropdown-menu">

<li>
Second level
</li>

<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">

<li>
3rd level
</li>

<li>
3rd level
</li>

</ul>

</li>

<li>
Second level
</li>

<li>
Second level
</li>

</ul>

</li>

</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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

相关讨论

我可以通过以下附加功能将子菜单固定在Andres回答的父菜单顶部：

1
2
3

.dropdown-menu li {
position: relative;
}

我还为包含菜单子菜单的项目添加图标"icon chevron right"，并在悬停时将图标从黑色更改为白色(以补充文本更改为白色，并在选定的蓝色背景下看起来更好)。

以下是完整的less/css更改(用此替换上面的内容)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

我刚把class="span2"添加到

的下拉项中，效果很好。

由于bootstrap 3删除了子菜单部分，我们需要调整自己的风格，我认为最好使用smartmenu bootstrap:https://vadikom.github.io/smartmenu s/src/demo/bootstrap-navbar.html#

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

这个插件也很有前途。

相关讨论