ブートストラップ～マルチレベルナビゲーション（カスケードナビゲーション）の導入効果【コード付き】_javascriptスキル

Bootstrap 関係者によると、ナビゲーションには最大でも 2 つのレベルしかなく、それ以上のレベルを実現することは不可能だそうです。おじさんはサードパーティの情報を探し、最終的に良いプラグインを見つけました。使用中ですので、みんなと共有してください

プラグインのアドレス: http://vsn4ik.github.io/bootstrap-submenu/

おじさんの背景システムの表示効果を見てみましょう

実装方法について話しましょう

1 3 つの 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" />

2. 対応する HTML コード ブロックを挿入します。この例ではコードの生成に再帰を使用しませんが、実際の運用環境ではより明確になるように、再帰を使用してメニューを生成することをお勧めします。

コードをコピー コードは次のとおりです:

<ul class="nav nav-pills">

@foreach (モデル内の変数項目)
    {
        if (item.Sons != null && item.Sons.Count > 0)
        {
               
        <li class="ドロップダウン">
            <a data-submenu="" data-toggle="dropdown" tabindex="0">@item.MenuName<span class="caret"></span></a>
            <ul class="ドロップダウンメニュー">
                @foreach (item.Sons の var sub)
                {
                    if (sub.Sons != null && item.Sons.Count > 0)
                    {

<li class="dropdown-submenu">
                        <a tabindex="0">@sub.MenuName</a>
                        <ul class="ドロップダウンメニュー">
                            @foreach (sub.Sons の内部変数)
                            {
                                <li>
                                    <a href="@inner.LinkUrl">@inner.MenuName</a>
                                </li>
                            }

</ul>
                    </li>
                    <li class="ディバイダー"></li>

}

else
                                                               {
                                                                                                                                                                                                                       <li><a href="@sub.LinkUrl">@sub.MenuName</a></li>
                 }
                }
                                                   </ul>
                                                                                        }
        else
           {
                                                                                                                           }
}
</ul>


The final effect is the first picture. It is worth noting that if you want to use dividing lines between each menu, you can add the line of code <li class="divider"></li>.

Thank you for reading! Article source Zhang Zhanling