Bootstrap 3下拉子菜单不起作用

时间:2014-12-19 11:01:18

标签: html css twitter-bootstrap twitter-bootstrap-3

即使在悬停之前,子菜单块也始终可见。无法理解缺少的内容: -

**HTML**

<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
            Menu 
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Item1</a></li>
            <li class="dropdown-submenu">
                <a href="#">Item2</a>
                <ul class="dropdown-menu" >
                    <li>
                        <a href="#">Item2.1</a>
                    </li>
                    <li>
                        <a href="#">Item2.2</a>
                    </li>
                </ul>
            </li>
          </ul>
        </li>

CSS

    /* dropdown sub menu support for Bootsrap 3 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 5px;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

当我悬停主菜单子菜单时,下拉列表始终可见?

.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
}

.dropdown-submenu > a:after {
  position: absolute;
  display: inline-block;
  font-size: 14px;
  right: 7px;
  top: 7px;
  font-family: FontAwesome;
  height: auto;
  content: "\f105";
  font-weight: 300;
}

.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;
}

我使用的是metronic主题并且包含了所有可能的样式表。

1 个答案:

答案 0 :(得分:1)

显然是Bootstrap 3.0及更新don't support nested dropdown menus

也许值得检查上面链接中的脚本。

为了完整起见,我会在此处添加:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // Re-add .open to parent sub-menu item
    $(this).parent().addClass('open');
    $(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});