另一个下拉菜单中的下拉菜单不起作用
问题描述:
我无法使另一个下拉菜单中的下拉菜单正常工作。第一级下拉菜单工作正常,但对于第二级,当我点击下拉菜单(学习配置文件)选项时,没有任何反应......菜单无法显示。另一个下拉菜单中的下拉菜单不起作用
<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>
答
没有在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
我发现这个链接,可以帮助你: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 –