Bootstrap~多级导航（级联导航）的实现

回到目录

在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，终于找到一个不错的插件，使用上和效果上都还不错，现在和大家分享一下

插件地址：http://vsn4ik.github.io/bootstrap-submenu/

先看一下，在大叔后台系统上的显示效果

aaarticlea/png;base64,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" alt="" />

下面说一下实现的方式

１　引用三个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>这行代码。

感谢各位的阅读！

回到目录