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:

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:

    @foreach (variables Element im Modell)
    {
        if (item.Sons != null && item.Sons.Count > 0)
        {
               
       

• 
              @item.MenuName
             
  
                  @foreach (var sub in item.Sons)
                  {
                      if (sub.Sons != null && item.Sons.Count > 0)
                      {

                     

  • 
                            @sub.MenuName
                           
    
                                @foreach (var inner in sub.Sons)
                                {
                                   
    • 
                                          @inner.MenuName
                                     
    
                                }

                           

    
                       
  
                     

                      }

  sonst
                                                                {
  & Lt; li & gt                  }
                  }
                                                                                                                                                                                         }
          sonst
              {
                                                                                                                      }
  }
  

  
  
  
  Der letzte Effekt ist das erste Bild. Wenn Sie Trennlinien zwischen den einzelnen Menüs verwenden möchten, können Sie die Codezeile
hinzufügen.

Vielen Dank fürs Lesen! Artikelquelle Zhang Zhanling