Bootstrap多级导航栏(级联导航)的实现代码_ 在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，最终找到一个不错的插件，用法上和效果上都还不错，现在和大家分享一下 先看一下，在后台系统上的显示效果 下面说一下实现的方式 .引用三个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 nav nav-pills foreach (var item in Model) if (item.Sons != null item.Sons.Count 0) li dropdown a data-submenu= data-toggle=dropdown tabindex=0item.MenuNamespan caret/span/a ul dropdown-menu foreach (var sub in item.Sons) if (sub.Sons != null item.Sons.Count 0) li dropdown-submenu a tabindex=0sub.MenuName/a ul dropdown-menu foreach (var inner in sub.Sons) li a href=inner.LinkUrlinner.MenuName/a /li /ul /li li divider/li else lia href=sub.LinkUrlsub.MenuName/a/li /ul /li else lia href=item.LinkUrlitem.MenuName/a/li /ul 最终的效果就是第一个图了，值得留意的是，假如盼望每个菜单之间用法分割线，可以添加 li divider/li这行代码。 下面给大家推举一段代码有关Bootstrap多级级联菜单 div navbar navbar-fixed-top div navbar-inner div container-fluid a data-target=.nav-collapse data-toggle=collapse btn btn-navbar span icon-bar/span span icon-bar/span span icon-bar/span /a a href=# brandProject name/a div nav-collapse ul nav li 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 dropdown a data-toggle=dropdown dropdown-toggle href=# Dropdown b caret/b /a ul dropdown-menu li dropdown-submenu a href=#More options/a ul 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 dropdown-submenu a href=#Second level link/a ul 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 divider/li li nav-headerNav header/li li a href=#Separated link/a /li li a href=#One more separated link/a /li /ul /li /ul form action= navbar-search pull-left input type=text placeholder=Search search-query span2 /form ul nav pull-right li a href=#Link/a /li li divider-vertical/li li dropdown a # href=#Menu/a /li /ul /div!- /.nav-collapse - /div /div /div hr / ul nav nav-pills li active a href=#Regular link/a /li li dropdown a href=# data-toggle=dropdown dropdown-toggle Dropdown b caret/b /a ul dropdown-menu id=menu1 li dropdown-submenu a href=#More options/a ul 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 divider/li li a href=#Separated link/a /li /ul /li li dropdown a href=#Menu/a /li li dropdown a href=#Menu/a /li /ul 以上所述是我给大家介绍的Bootstrap多级导航栏(级联导航)的实现代码，盼望对大家有所关心！ .