html - Bootstrap 3 下拉子菜单不起作用

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

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

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

当我悬停主菜单时,下拉菜单的子菜单 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;
}

我正在使用节拍主题并包含了所有可能的样式表。

最佳答案

显然是 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');
});

关于html - Bootstrap 3 下拉子菜单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27564659/

相关文章:

javascript - HTML 视频无法在移动设备上播放?如何正确设置?

HTML 表格行 (tr) : How to set the height fixed, 等于最大高度元素

javascript - 如何在网站的移动设备上录制音频?

asp.net - 获取选定的输入类型单选按钮 ASP.NET

css-显示页脚下方有大量空间

html - Bootstrap 导航栏对齐正确的问题没有崩溃

javascript - 如何以完美的网格样式将不同大小的 DIV float 到左侧?

javascript - 如何在 Angular 6 中设置背景图像图像路径

html - Bootstrap网格不会初始化,但是其他所有功能都可以

html - Bootstrap 下拉按钮点击不打开