Question

我有这个HTML代码：

<html><head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<ul id="menu" class="nav navbar-nav collapse navbar-collapse">
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            MAIN
        </a>
        <ul class="dropdown-menu">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
                    Dropdown Menu 1
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a>Sub submenu</a>
                    </li>
                </ul>
            </li>
            <li>
                <a>B</a>
            </li>
        </ul>
    </li>
</ul>
</body></html>

问题是，当我下拉“MAIN”菜单时，我看到有一个“下拉菜单1”....但如果我关闭主下拉菜单...我在开发者工具上看到它公开课增加到第二次下拉但第一次失去了公开课......可能是什么问题？谢谢你的帮助！

Answer 1

看看： https://jsfiddle.net/26fy9yxm/

JAVASCRIPT：

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

CSS：

.dropdown-submenu {
    position: relative;
}

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

HTML：

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Main <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a class="test" tabindex="-1" href="#">Dropdown Menu 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Submenu1</a></li>
        <li><a tabindex="-1" href="#">Submenu2</a></li>
      </ul>
    </li>
    <li><a href="#">B</a></li>
  </ul>
</div>

外部代码：

https://code.jquery.com/jquery-3.2.1.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Answer 2

您可以使用专为多级下拉菜单设计的Bootstrap组件。

组件依赖关系：

需要jQuery，Bootsrap 3.x CSS和JavaScript文件。如果想使用动画，取决于Bootstrap Dropdown组件和animate.css。

Bootstrap兼容性：

Dropdownhover与Bootstrap的本机Dropdown组件完全兼容。它们可以应用于同一个项目，提供悬停和点击事件支持。在小型设备上，忽略悬停事件。

点击此链接Bootstrap dropdown hover

Answer 3

$(document).ready(function(){
  $('.dropdown-submenu a.linkbtn').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });

  $(document).click(function(){
   $(".dropdown-submenu").hide();
  });
});

带引导程序的多个下拉菜单不起作用？

3 个答案: