中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

Bootstrap~多級導(dao)(dao)航(hang)（級聯導(dao)(dao)航(hang)）的實現(xian)

回到目錄

在(zai)bootstrap官方來(lai)說，導航最多就是兩級，兩級以(yi)上(shang)是無法實(shi)現(xian)的，大叔找了一(yi)些(xie)第三方的資(zi)料(liao)，終于(yu)找到一(yi)個(ge)不錯的插(cha)件，使(shi)用上(shang)和效果上(shang)都還不錯，現(xian)在(zai)和大家分享一(yi)下

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

先看一下，在大叔后臺系(xi)統上的(de)顯(xian)示效(xiao)果

下(xia)面說一下(xia)實(shi)現的方式

１　引用三個(ge)JS插件和一個(ge)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代碼塊,本例子沒有(you)使用遞歸(gui)(gui)生成(cheng)代碼，使用了(le)靜(jing)態(tai)的三(san)級結(jie)構，這樣看著更清晰，真正的生產(chan)環境建議使用遞歸(gui)(gui)去(qu)生產(chan)菜單

<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 &&amp; 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>

最后(hou)的效果就(jiu)是第(di)一個圖了，值得注意的是，如(ru)果希望每個菜單之(zhi)間使用分(fen)割線，可(ke)以添加  <;li class="divider"></li>這行代碼。

感謝各位的閱讀！

 

回到目錄

posted @ 2016-03-08 15:44  張占嶺  閱讀(8750)  評論(1)    收藏  舉報