css - Bootstrap 多级下拉菜单未扩展

Question

我正在使用 Bootstrap 体验多级下拉菜单，我确保我拥有最新版本的 Bootstrap。我的代码非常简单。问题是子级别没有扩展(不显示)。

我怀疑 html 有问题:

<div class="dropdown">
<a href="#" id = "Service_1" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Service 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
    <a class="trigger right-caret">Color</a>
    <ul class="dropdown-menu sub-menu">
      <li>Green</li>
      <li>Red</li>
      <li>Blue</li>
    </ul>
</li>
<li class="divider"></li>
<li>
    <a class="trigger right-caret">Names</a>
    <ul class="dropdown-menu sub-menu">
       <li>James</li>
       <li>Mike</li>
       <li>Bob</li>
    </ul>
</li>
</ul>
</div>    

这是一个 fiddle :https://jsfiddle.net/9vzk9x9e/3/

请分享您的想法。谢谢。

Answer 1

你是否包含了 jQuery？顺便说一下，你可以编写相应的 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();
    });
});

这是一个很好的例子，可以看看:

http://jsfiddle.net/chirayu45/yxkut/16/