另一個下拉菜單中的下拉菜單不起作用

我無法使另一個下拉菜單中的下拉菜單正常工作。第一級下拉菜單工作正常，但對於第二級，當我點擊下拉菜單（學習配置文件）選項時，沒有任何反應......菜單無法顯示。另一個下拉菜單中的下拉菜單不起作用

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-2"> 
 
     <nav id="sideNavBar"> 
 
     <ul class="nav nav-pills nav-stacked"> 
 
      <li id="navBarTitle">MENU</li> 
 

 
      <li class="dropdown"> 
 
      <a href="Children.html" data-toggle="dropdown" class="droptown-toggle">Children <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li> 
 
       <a href="ChildrenAddChild.html">Add Child</a> 
 
       </li> 
 
       <li> 
 
       <a href="ChildrenAddChild.html">Archive/Delete Child</a> 
 
       </li> 
 
       <li> 
 
       <a href="ChildrenDetails.html">Children Details</a> 
 
       </li> 
 
       <li class="dropdown"> 
 
       <a href="ChildrenProfiles.html" data-toggle="dropdown" class="droptown-toggle">Learning Profiles<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li> 
 
        <a href="Observations.html">Observations</a> 
 
        </li> 
 
        <li> 
 
        <a href="learningOutcomes.html">Learning Outcomes</a> 
 
        </li> 
 
        <li> 
 
        <a href="Photos.html">Photos</a> 
 
        </li> 
 
       </ul> 
 
       </a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </div>

來源

2017-09-24 sleepylog

我發現這個鏈接，可以幫助你：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked= h – blendenzo

由於Bootstrap文檔沒有提到不支持嵌套下拉列表，我假定它們是。但是你可能是對的，也許他們不支持。你發給我的鏈接正是我想要達到的目標。我會檢查出來的。謝謝。 – sleepylog

另一個好鏈接 - http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html –

沒有在HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-2"> 
      <nav id="sideNavBar"> 
       <ul class="nav nav-pills nav-stacked"> 
        <li id="navBarTitle">MENU</li> 

        <li class="dropdown"> 
         <a href="Children.html" data-toggle="dropdown" class="droptown-toggle">Children <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li> 
           <a href="ChildrenAddChild.html">Add Child</a> 
          </li> 
          <li> 
           <a href="ChildrenAddChild.html">Archive/Delete Child</a> 
          </li> 
          <li> 
           <a href="ChildrenDetails.html">Children Details</a> 
          </li> 
          <li class ="dropdown-submenu"> 
           <a href="#" class="test droptown-toggle" data-toggle="dropdown">Learning Profiles<span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
             <li> 
              <a href="Observations.html">Observations</a> 
             </li> 
             <li> 
              <a href="learningOutcomes.html">Learning Outcomes</a> 
             </li> 
             <li> 
              <a href="Photos.html">Photos</a> 
             </li> 
            </ul> 
           </a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div>

變化不大添加以下CSS

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

還需要添加JavaScript

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

工作plunker：https://plnkr.co/edit/jjrowMvX3FJ7OAsFpiaA?p=preview

來源

2017-09-27 06:41:38

另一個下拉菜單中的下拉菜單不起作用

回答

相關問題