Bootstrap多級導覽列(級聯導航)的實現代碼_javascript技巧

在bootstrap官方來說，導航最多就是兩級，兩級以上是無法實現的，大叔找了一些第三方的資料，終於找到一個不錯的外掛程式，使用上和效果上都還不錯，現在和大家分享一下

外掛程式地址：http://vsn4ik.github.io/bootstrap-submenu/

先看一下，在後台系統上的顯示效果

下面說一下實現的方式

１.引用三個JS外掛程式和一個CSS類庫

<script src="~/Content/bootstraps/JS/bootstrap-submenu.js"></script><script src="~/Content/bootstraps/JS/highlight.min.js"></script><script src="~/Content/bootstraps/JS/docs.js"></script><link href="~/Content/bootstraps/CSS/bootstrap-submenu.css" rel="stylesheet" /> 

２.插入對應的HTML代碼塊,本例子沒有使用遞迴產生代碼，使用了靜態三級結構，這樣看著更清晰，真正的生產環境建議使用遞迴去生產菜單

<ul class="nav nav-pills">@foreach (var item in Model){if (item.Sons != null && item.Sons.Count > 0){<li class="dropdown"><a data-submenu="" data-toggle="dropdown" tabindex="0">@item.MenuName<span class="caret"></span></a><ul class="dropdown-menu">@foreach (var sub in item.Sons){if (sub.Sons != null && item.Sons.Count > 0){<li class="dropdown-submenu"><a tabindex="0">@sub.MenuName</a><ul class="dropdown-menu">@foreach (var inner in sub.Sons){<li><a href="@inner.LinkUrl">@inner.MenuName</a></li>}</ul></li><li class="divider"></li>}else{<li><a href="@sub.LinkUrl">@sub.MenuName</a></li>}}</ul></li>}else{<li><a href="@item.LinkUrl">@item.MenuName</a></li>}}</ul> 

最後的效果就是第一個圖了，值得注意的是，如果希望每個菜單之間使用分割線，可以添加 <li class="divider"></li>這行代碼。

下面給大家推薦一段代碼有關Bootstrap多級串聯功能表

<div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="container-fluid"><a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="#" class="brand">Project name</a><div class="nav-collapse"><ul class="nav"><li class="active"><a href="#">Home</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a><ul class="dropdown-menu"><li class="dropdown-submenu"><a href="#">More options</a><ul class="dropdown-menu"><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li class="dropdown-submenu"><a href="#">Second level link</a><ul class="dropdown-menu"><li><a href="#">3333333333</a></li></ul></li></ul></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li class="nav-header">Nav header</li><li><a href="#">Separated link</a></li><li><a href="#">One more separated link</a></li></ul></li></ul><form action="" class="navbar-search pull-left"><input type="text" placeholder="Search" class="search-query span2"></form><ul class="nav pull-right"><li><a href="#">Link</a></li><li class="divider-vertical"></li><li class="dropdown"><a class="#" href="#">Menu</a></li></ul></div><!-- /.nav-collapse --></div></div></div><hr /><ul class="nav nav-pills"><li class="active"><a href="#">Regular link</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown<b class="caret"></b></a><ul class="dropdown-menu" id="menu1"><li class="dropdown-submenu"><a href="#">More options</a><ul class="dropdown-menu"><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li></ul></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></li><li class="dropdown"><a href="#">Menu</a></li><li class="dropdown"><a href="#">Menu</a></li></ul>

以上所述是小編給大家介紹的Bootstrap多級導覽列(級聯導航)的實現代碼，希望對大家有所協助！