Bootstrap~L'effet de mise en œuvre de la navigation à plusieurs niveaux (navigation en cascade) [avec code]_compétences javascript

Selon les responsables de Bootstrap, la navigation ne peut avoir que deux niveaux au maximum, et il est impossible d'atteindre plus de deux niveaux. L'oncle a recherché des informations tierces et a finalement trouvé un bon plug-in, qui est à la fois bon. en utilisation et en effet. Maintenant, cela fonctionne avec Partagez-le avec tout le monde

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

Jetons un coup d'œil à l'effet d'affichage sur le système d'arrière-plan d'Oncle

Parlons de la façon de le mettre en œuvre

1 Référence à trois plug-ins JS et une bibliothèque de classes CSS

Copier le code Le code est le suivant :

2. Insérez le bloc de code HTML correspondant. Cet exemple n'utilise pas la récursion pour générer du code, mais utilise une structure statique à trois niveaux, ce qui le rend plus clair. Dans un environnement de production réel, il est recommandé d'utiliser la récursion pour produire le menu.

Copier le code Le code est le suivant :

    @foreach (item var dalam Model)
    {
        jika (item.Sons != null && item.Sons.Count > 0)
        {
               
       

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

                     

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

                           

    
                       
  
                     

                      }

  lain
                                                                 {
  & Lt;                  }
                  }
                                                    

  
                                                                                                 }
          lain
             {
                                                                                                                                                                                                                               }
  }
  

Kesan terakhir ialah gambar pertama Perlu diingat bahawa jika anda ingin menggunakan garis pembahagi antara setiap menu, anda boleh menambah baris kod

.

Terima kasih kerana membaca! Sumber artikel Zhang Zhanling