Bootstrap中的多级下拉3.3.5 [英] Multilevel Dropdown in Bootstrap 3.3.5
问题描述
我有以下的HTML代码,我已经结构化了我应该如何实现基于Bootstrap文档中的标记。
I have the following HTML code and I've structured it to how I think it should be achieved based on the mark-up in the Bootstrap docs.
<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>
但是,这不工作,它给我这个:
However, this isn't working, it gives me this:
当我点击顾问,它只是摆脱下拉。可以使用Bootstrap CSS / JS单独实现多级下拉菜单吗?或者我们必须为它编写自定义CSS吗?
When I click on the Consultants, it simply gets rid of the dropdown. Can multilevel drop-downs be achieved with Bootstrap CSS/JS alone? Or must we write custom CSS for it?
任何简单的解决方案,其工作方式类似于单巢级别的工作方式,并且响应和触摸友好(对于平板电脑和电话)?
Any easy solutions that would work similar to how a single nest level work, and are responsive and touch-friendly (for tablets and phones)?
感谢
推荐答案
默认示例from bootstrap 3有3级下拉导航菜单,但你可以这样做,一点定制和java脚本,它是完全响应。
I don't recall any default example from bootstrap 3 having 3 level drop down nav menu, but you can do like this, little bit of customization and java-script and it's fully responsive.
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);
这篇关于Bootstrap中的多级下拉3.3.5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!