html - Bootstrap 嵌套下拉列表

Question

我正在尝试在下拉菜单中创建级联 View ->/myApp/app/views/layouts/includes/_site-header.html.erb

<li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Level 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">                                    
        <li><%= link_to "Level 1.0.1", "/some_link/link_level_1_0_1" %></li>
        <li class="dropup"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Level1.1<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><%= link_to "Level 1.1", "/some_link/link_level_1_1_1" %></li>                                                       
          </ul>
        </li>                               
      </ul>
    </li>   

Level 1(最高级别)显示正确，但 Level 1.1 嵌套下拉列表未显示。

如何使用内联 CSS 来更正此问题？

Answer 1

您想将其设为嵌套下拉列表。这是一个很好的例子。 JSFIDDLE

来源自http://jsfiddle.net/chirayu45/yxkut/16/

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>

JS:

$(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();
    });
});