在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>
@foreach (var item in Model)
{
if (item.Sons != null && item.Sons.Count > 0)
{
<li>
<a data-submenu="" data-toggle="dropdown" tabindex="0">@item.MenuName<span></span></a>
<ul>
@foreach (var sub in item.Sons)
{
if (sub.Sons != null && item.Sons.Count > 0)
{
<li>
<a tabindex="0">@sub.MenuName</a>
<ul>
@foreach (var inner in sub.Sons)
{
<li>
<a href="@inner.LinkUrl">@inner.MenuName</a>
</li>
}
</ul>
</li>
<li></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></li>这行代码。
下面给大家推荐一段代码有关Bootstrap多级级联菜单
<div>
<div>
<div>
<a data-target=".nav-collapse" data-toggle="collapse">
<span></span>
<span></span>
<span></span>
</a>
<a href="#">Project name</a>
<div>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a data-toggle="dropdown" href="#">
Dropdown
<b></b>
</a>
<ul>
<li>
<a href="#">More options</a>
<ul>
<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>
<ul>
<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></li>
<li>Nav header</li>
<li>
<a href="#">Separated link</a>
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form action="">
<input type="text" placeholder="Search">
</form>
<ul>
<li>
<a href="#">Link</a>
</li>
<li></li>
<li>
<a href="#">Menu</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
<hr />
<ul>
<li>
<a href="#">Regular link</a>
</li>
<li>
<a href="#" data-toggle="dropdown">
Dropdown
<b></b>
</a>
<ul id="menu1">
<li>
<a href="#">More options</a>
<ul>
<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></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
</ul>
以上所述是小编给大家介绍的Bootstrap多级导航栏(级联导航)的实现代码，希望对大家有所帮助！
- 2017年下半年北京市顺义区补充录用公务员现场资格复审公告
- 七台河市2017年考试录用公务员拟进入面试考生进行资格确认的通知
- 2017年报考哈尔滨市党群机关及参公单位/检察系统/法院系统（非捆绑）职位拟进入面试考生资格确认公告
- 2017年森工系统考试录用公务员（参照管理人员）面试资格确认公告
- 大庆市2017年考试录用各级机关公务员和参照公务员法管理单位工作人员现场资格确认通知
- 鸡西市2017年度各级机关考试录用公务员（含参公人员）拟进入面试考生现场资格确认通知
- 2017年黑龙江省高级人民法院进入面试范围考生资格审查/微机打字考试和捆绑职位二次报名公告
- 2017年黑龙江省人民检察院及农林铁检察机关现场资格确认公告（含跨地市合并岗位）
- 2017年绥化市考试录用各级机关公务员（参公管理单位工作人员）拟进入面试考生进行资格确认公告
- 2017年哈尔滨市行政机关（参照公务员法管理单位）拟进入面试考生现场资格确认公告
- 佳木斯市2017年考试录用公务员面试资格确认的通知
- 2017年黑龙江省直司法行政系统招考公务员考生资格确认通知
- 伊春市2017年度考试录用公务员拟进入面试考生进行资格确认公告
- 2017年黑河市考试录用公务员（参公单位工作人员）拟进入面试人员资格确认通知
- 牡丹江市2017年度考试录用公务员拟进入面试考生进行资格确认的公告
- 大兴安岭地区2017年度各级党政机关考试录用公务员拟进入面试考生进行现场资格确认的公告
- 2017年北京市西城区退役大学生士兵事业单位招聘公示
- 2017渭南市华州区人民政府办公室遴选公告
- 2017年北京市昌平区补充录用公务员现场资格审查工作有关问题通知
- 2017西安市未央区纪委选调纪检监察干部公告
- 2017年北京市门头沟区补充录用公务员现场资格审查公告
- 2017年北京市通州区补充录用公务员资格审查公告
- 2017年北京市延庆区补充录用公务员资格审查公告
- 2017年北京市知识产权局补充录用公务员资格审查公告
- 2017年北京市丰台区补充录用公务员资格审查公告
- editorial content
- editorial control
- editorial department
- editorial director
- editorial independence
- editorial introduction
- editorialize
- editorialized
- editorializing
- editorial judgment
- 灶头
- 灶屋
- 灶户
- 灶房
- 灶披
- 灶披楼
- 灶披间
- 灶火
- 灶火坑
- 灶炕
- 2022年销售员工作心得
- 2023年销售年终工作心得
- 销售季度工作心得体会
- 服装销售员工作心得最新
- 销售试用期工作心得总结
- 2023年班主任年终工作心得感悟
- 班主任教学工作心得总结
- 职中班主任工作心得最新
- 2023年班主任德育工作心得
- 2023年班主任管理工作心得总结