Bootstrap~Kesan pelaksanaan navigasi berbilang peringkat (navigasi bertingkat) [dengan kod]_kemahiran javascript

Menurut pegawai Bootstrap, navigasi hanya boleh mempunyai dua tahap paling banyak, dan adalah mustahil untuk mencapai lebih daripada dua tahap Pakcik itu mencari beberapa maklumat pihak ketiga dan akhirnya menemui pemalam yang baik, yang kedua-duanya bagus digunakan dan berkesan Kini ia berfungsi dengan Kongsi dengan semua orang

Alamat pemalam: http://vsn4ik.github.io/bootstrap-submenu/

Mari kita lihat kesan paparan pada sistem latar belakang Pakcik

Mari bincang tentang cara melaksanakannya

1 Rujukan kepada tiga pemalam JS dan perpustakaan kelas CSS

Salin kod Kod adalah seperti berikut:

2. Masukkan blok kod HTML yang sepadan Contoh ini tidak menggunakan rekursi untuk menjana kod, tetapi menggunakan struktur tiga peringkat statik, yang menjadikannya kelihatan lebih jelas Dalam persekitaran pengeluaran sebenar, disyorkan untuk menggunakan rekursi untuk menghasilkan menu

Salin kod Kod adalah seperti berikut:

    @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
                                     
    
                                }

                           

    
                       
  
                     

                      }

  autre
                                                                {
                                                                                                                                                                                                                             

  • @sub.Men uName
  
                   }
                  }
                                                   
  
                                                                                      >
          autre
             {
                                                                                                                             >
  >
  

L'effet final est la première image. Il est à noter que si vous souhaitez utiliser des lignes de séparation entre chaque menu, vous pouvez ajouter la ligne de code

.

Merci d'avoir lu ! Source de l'article Zhang Zhanling