我有以下 HTML 代码,并根据 Bootstrap 文档中的标记将其构建为我认为应该实现的方式。
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hospital<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown">
<a href="#">Consultants <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Adult cardiac surgery</a></li>
<li><a href="#">Bariatric surgery</a></li>
<li><a href="#">Colorectal surgery</a></li>
<li><a href="#">Endocrine and thyroid surgery</a></li>
<li><a href="#">Head and neck cancer surgery</a></li>
<li><a href="#">Interventional cardiology</a></li>
<li><a href="#">Lung Cancer</a></li>
<li><a href="#">Neurosurgery</a></li>
<li><a href="#">Orthopaedic surgery</a></li>
<li><a href="#">Upper gastro-intestinal surgery</a></li>
<li><a href="#">Urological surgery</a></li>
<li><a href="#">Vascular surgery</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
然而,这不起作用,它给了我这个:
当我单击“顾问”时,它只是删除了下拉菜单。单独使用Bootstrap CSS/JS可以实现多级下拉吗?或者我们必须为它编写自定义CSS?
有没有简单的解决方案,其工作方式与单层嵌套的工作方式类似,并且响应灵敏且触摸友好(适用于平板电脑和手机)?
Thanks
我不记得 Bootstrap 3 中的任何默认示例具有 3 级下拉导航菜单,但您可以这样做,一点点自定义和 java 脚本,并且它是完全响应式的。
HTML
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"> <a href="#">Home</a>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Hospital<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Consultants</a>
<ul class="dropdown-menu">
<li><a href="#">Adult cardiac surgery</a>
</li>
<li><a href="#">Bariatric surgery</a>
</li>
<li><a href="#">Colorectal surgery</a>
</li>
<li><a href="#">Endocrine and thyroid surgery</a>
</li>
<li><a href="#">Head and neck cancer surgery</a>
</li>
<li><a href="#">Interventional cardiology</a>
</li>
<li><a href="#">Lung Cancer</a>
</li>
<li><a href="#">Neurosurgery</a>
</li>
<li><a href="#">Orthopaedic surgery</a>
</li>
<li><a href="#">Upper gastro-intestinal surgery</a>
</li>
<li><a href="#">Urological surgery</a>
</li>
<li><a href="#">Vascular surgery</a>
</li>
</ul>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
CSS
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#555;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
JS
(function ($) {
$(document).ready(function () {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
工作示例 http://jsfiddle.net/kyptq1q0/2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)