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

I have this html code:

我有这个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>

And the problem is that When I drop down the "MAIN" menu and i see there is a "Dropdown Menu 1"....but if i close the main dropdown...I see it on the developer tool that the open class added to the second dropdown but the first lost the open class...What can be the problem? Thanks for the help!

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

3 个解决方案

#1

Take a look: https://jsfiddle.net/26fy9yxm/

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

JAVASCRIPT:

JAVASCRIPT：

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

CSS:

CSS：

.dropdown-submenu {
    position: relative;
}

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

HTML:

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>

External code:

外部代码：

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

#2

You can use Bootstrap component designed for multilevel dropdowns.

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

Component dependencies :

组件依赖：

Requires jQuery, Bootsrap 3.x CSS and JavaScript files. Depends on Bootstrap Dropdown component and animate.css if want to use animations.

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

Bootstrap compatibility :

Bootstrap兼容性：

Dropdownhover is fully compatible with Bootstrap's native Dropdown component. They two can be applied to the same item, providing hover and click events support. On small devices hover event is ignored.

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

Check this link Bootstrap dropdown hover

检查此链接Bootstrap下拉悬停

#3

-1

$(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();
  });
});

#1