Twitter Bootstrap多级下拉菜单

Question

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

Answer 1

要在Twitter Bootstrap v3中创建n级下拉菜单（触摸设备友好），

n级下拉菜单v3.0.0的 jsfiddle-demo | v3.1.1 | v3.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>