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>

这是一个小提琴：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/

Answer 2

您只能使用CSS完成此操作。方法如下：

<强> HTML

<ul class="dropdown-menu" role="menu" aria-labelledby="...">
  ...
  <li class="dropdown-submenu" role="presentation">
    <a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Menu item 1</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="...">
      <li><a role="menuitem" href="#">Submenu item 1</a></li>
      <li><a role="menuitem" href="#">Submenu item 2</a></li>
      ...
    </ul>
  </li>
  ...
</ul>

<强> CSS

/* DROPDOWN SUBMENU */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0px;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 0 3px 3px;
     -moz-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
}

.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: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}

.dropdown-submenu:hover > a {
  background-color: #f88e1d;
  background-image: none;
  color: #fff;
}

.navbar-default .navbar-nav .dropdown-submenu > a:after {
  border-width: 0;
}

.navbar-nav .dropdown-submenu:hover > a {
  background-color: transparent;
}

.navbar-nav .dropdown-submenu ul {
  display: block;
  padding-left: 20px;
}

Answer 3

解决。问题出在我的CSS中，我遗漏了这一部分。

.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

Bootstrap多级下拉菜单不扩展

3 个答案: