《Bootstrap~多级导航(级联导航)的实现效果_》由会员分享，可在线阅读，更多相关《Bootstrap~多级导航(级联导航)的实现效果_（4页珍藏版）》请在金锄头文库上搜索。
1、Bootstrap多级导航(级联导航)的实现效果_ 在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，最终找到一个不错的插件，用法上和效果上都还不错，现在和大家分享一下 插件地址：http:/vsn4ik.github.io/bootstrap-submenu/ 先看一下，在大叔后台系统上的显示效果 下面说一下实现的方式 .引用三个JS插件和一个CSS类库 代码如下: script src=/Content/bootstraps/JS/bootstrap-submenu.js/script script src=/Content/bootstrap
2、s/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
3、.Sons.Count 0) li class=dropdown a data-submenu= data-toggle=dropdown tabindex=0item.MenuNamespan 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=0sub.MenuName/a ul class=dropdown-menu foreach (var inner in sub.Sons) li a href=inner.LinkUrlinner.MenuName/a /li /ul /li li class=divider/li else lia href=sub.LinkUrlsub.MenuName/a/li /ul /li else lia href=item.LinkUrlitem.MenuName/a/li /ul 最终的效果就是第一个图了，值得留意的是，假如盼望每个菜单之间用法分割线，可以添加 li class=divider/li这行代码。 .
