效果

HTML代碼

<div class="sidebar"><div class="mc-search"><div class="input-group"><input type="text" class="form-control" placeholder="Search..."><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-search"></i></button></span></div></div><div class="navbar navbar-default" id="mycollapse"><!-- <ul class="nav navbar-nav nav-pills nav-stacked"> --><ul class="nav nav-pills nav-stacked"><li><a href="#"><i class="fa fa-dashboard fa-fw"></i> DashBord</a></li><li><a href="#second-level-1" class="second-level accordion-toggle"data-toggle="collapse"data-parent="#mycollapse"><i class="fa fa-table fa-fw"></i> Table<iclass="fa fa-angle-left pull-right"></i></a><ul class="nav collapse" id="second-level-1"><li><a href="#">數(shù)據(jù)庫測試</a></li><li><a href="#">數(shù)據(jù)庫測試</a></li><li><a href="#">數(shù)據(jù)庫測試</a></li></ul></li><li><a href="#"><i class="fa fa-bar-chart fa-fw"></i> Chart</a></li><li><a href="#"><i class="fa fa-edit fa-fw"></i> Form</a></li><li><a href="#second-level-2" class="second-level accordion-toggle"data-toggle="collapse"data-parent="#mycollapse"><i class="fa fa-table fa-fw"></i> Table<iclass="fa fa-angle-left pull-right"></i></a><ul class="nav collapse" id="second-level-2"><li><a href="#">數(shù)據(jù)庫測試</a></li><li><a href="#">數(shù)據(jù)庫測試</a></li><li><a href="#">數(shù)據(jù)庫測試</a></li></ul></li><li><a href="#"><i class="fa fa-wrench fa-fw"></i> UI Element</a></li><li><a href="#second-level-3" class="second-level accordion-toggle"data-toggle="collapse" data-parent="#mycollapse"><i class="fa fa-table fa-fw"></i> Table<iclass="fa fa-angle-left pull-right"></i></a><ul class="nav collapse" id="second-level-3"><li><a href="#">數(shù)據(jù)庫測試</a></li><li><a href="#">數(shù)據(jù)庫測試</a></li><li><a href="#">數(shù)據(jù)庫測試</a></li></ul></li></ul></div></div>

JS代碼

$(function () {$(document).on('click', '.accordion-toggle', function(event) {event.stopPropagation();var $this = $(this);var parent = $this.data('parent');var actives = parent && $(parent).find('.collapse.in');// From bootstrap itselfif (actives && actives.length) {actives.data('collapse');actives.collapse('hide');}var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7$(target).collapse('toggle');}); })

效果

點(diǎn)擊一個(gè)可以展開下拉菜單。

點(diǎn)擊另外一個(gè)如果有下拉菜單則自動關(guān)閉上一個(gè)展開

?

轉(zhuǎn)載于:https://www.cnblogs.com/LiuChunfu/p/5132702.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap 手风琴搭配导航条实现常用菜单栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。