[英]Multilevel Dropdown in Bootstrap 3.3.5
我有以下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嗎?
任何簡單的解決方案都可以像單個嵌套級別一樣工作,並且具有響應性和觸摸友好性(適用於平板電腦和手機)?
謝謝
我不記得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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.