Twitter Bootstrap多级下拉菜单

Question

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

Answer 1

要在Twitter Bootstrap v3中创建n级下拉菜单（触摸设备友好），n级下拉菜单v3.0.0的 jsfiddle-demo | v3.1.1 | v3.3.0CSS：.dropdown-menu>li /* To prevent selection of text */{&nbsp; &nbsp;position:relative;&nbsp; &nbsp; -webkit-user-select: none; /* Chrome/Safari */&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; -moz-user-select: none; /* Firefox */&nbsp; &nbsp; -ms-user-select: none; /* IE10+ */&nbsp; &nbsp; /* Rules below not implemented in browsers yet */&nbsp; &nbsp; -o-user-select: none;&nbsp; &nbsp; user-select: none;&nbsp; &nbsp; cursor:pointer;}.dropdown-menu .sub-menu&nbsp;{&nbsp; &nbsp; left: 100%;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; display:none;&nbsp; &nbsp; margin-top: -1px;&nbsp; &nbsp; border-top-left-radius:0;&nbsp; &nbsp; border-bottom-left-radius:0;&nbsp; &nbsp; border-left-color:#fff;&nbsp; &nbsp; box-shadow:none;}.right-caret:after,.left-caret:after&nbsp;{&nbsp; content:"";&nbsp; &nbsp; border-bottom: 5px solid transparent;&nbsp; &nbsp; border-top: 5px solid transparent;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; height: 0;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; width: 0;&nbsp; &nbsp; margin-left:5px;}.right-caret:after{&nbsp; &nbsp;border-left: 5px solid #ffaf46;}.left-caret:after{&nbsp; &nbsp;border-right: 5px solid #ffaf46;}jQuery的：$(function(){&nbsp; &nbsp; $(".dropdown-menu > li > a.trigger").on("click",function(e){&nbsp; &nbsp; &nbsp; &nbsp; var current=$(this).next();&nbsp; &nbsp; &nbsp; &nbsp; var grandparent=$(this).parent().parent();&nbsp; &nbsp; &nbsp; &nbsp; if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).toggleClass('right-caret left-caret');&nbsp; &nbsp; &nbsp; &nbsp; grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');&nbsp; &nbsp; &nbsp; &nbsp; grandparent.find(".sub-menu:visible").not(current).hide();&nbsp; &nbsp; &nbsp; &nbsp; current.toggle();&nbsp; &nbsp; &nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; });&nbsp; &nbsp; $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){&nbsp; &nbsp; &nbsp; &nbsp; var root=$(this).closest('.dropdown');&nbsp; &nbsp; &nbsp; &nbsp; root.find('.left-caret').toggleClass('right-caret left-caret');&nbsp; &nbsp; &nbsp; &nbsp; root.find('.sub-menu:visible').hide();&nbsp; &nbsp; });});HTML：<div class="dropdown" style="position:relative">&nbsp; &nbsp; <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>&nbsp; &nbsp; <ul class="dropdown-menu">&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="trigger right-caret">Level 1</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="dropdown-menu sub-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 2</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="trigger right-caret">Level 2</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="dropdown-menu sub-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 3</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 3</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="trigger right-caret">Level 3</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="dropdown-menu sub-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 4</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 4</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 4</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 2</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 1</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Level 1</a></li>&nbsp; &nbsp; </ul></div>