Bootstrap ~ Der Implementierungseffekt der mehrstufigen Navigation (kaskadierende Navigation) [mit Code]_Javascript-Kenntnissen

Laut Bootstrap-Beamten kann die Navigation höchstens zwei Ebenen haben, und es ist unmöglich, mehr als zwei Ebenen zu erreichen. Der Onkel suchte nach Informationen von Drittanbietern und fand schließlich ein gutes Plug-In, das beides ist In Verwendung und Wirkung funktioniert es jetzt mit Teilen mit allen

Plug-in-Adresse: http://vsn4ik.github.io/bootstrap-submenu/

Werfen wir einen Blick auf den Anzeigeeffekt auf Onkels Hintergrundsystem

Lassen Sie uns darüber sprechen, wie Sie es umsetzen können

1 Verweis auf drei JS-Plug-Ins und eine CSS-Klassenbibliothek

Code kopieren Der Code lautet wie folgt:

<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. Fügen Sie den entsprechenden HTML-Codeblock ein, um den Code nicht durch Rekursion zu generieren, sondern durch eine statische dreistufige Struktur. In einer realen Produktionsumgebung wird empfohlen, die Rekursion zum Erstellen des Menüs zu verwenden

Code kopieren Der Code lautet wie folgt:

<ul class="nav nav-pills">

    @foreach (variables Element im Modell)
    {
        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>

                    }

sonst
                                                              {
& Lt; li & gt                  }
                }
                                                                                                                                                                                       }
        sonst
            {
                                                                                                                    }
}
</ul>


Der letzte Effekt ist das erste Bild. Wenn Sie Trennlinien zwischen den einzelnen Menüs verwenden möchten, können Sie die Codezeile <li class="divider"></li> hinzufügen.

Vielen Dank fürs Lesen! Artikelquelle Zhang Zhanling