帶引導程序的多個下拉菜單不起作用？

我有這樣的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>

而問題是，當我下拉「主」菜單中，我看到有一個「下拉菜單1」 ......但如果我關閉主下拉...我在開發者工具上看到它打開的類添加到第二個下拉列表中，但第一個丟失了公開類...可能是什麼問題？謝謝您的幫助！

來源

2017-08-17 kodaek98

可以請你給更多的信息，你想究竟是什麼？ –

我看不到「Sub submenu」下拉菜單... – kodaek98

我認爲Plunker會幫助您更好地理解您的問題 – onetwo12

請看： 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>

外部協de：

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

來源

2017-08-17 11:33:39

您可以使用爲多級下拉菜單設計的Bootstrap組件。

組件的依賴關係：

需要的jQuery，Bootsrap 3.x的CSS和JavaScript文件。如果想使用動畫，則取決於引導程序下拉組件和animate.css。

引導兼容性：

Dropdownhover與引導的本地下拉部件完全兼容。他們兩個可以應用於相同的項目，提供懸停和點擊事件支持。在小設備上懸停事件被忽略。

檢查此鏈接Bootstrap dropdown hover

來源

2017-08-17 11:34:56

帶引導程序的多個下拉菜單不起作用？

回答

相關問題