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

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

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

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

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

1 3 つの JS プラグインと CSS クラス ライブラリへのリファレンス

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

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

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

@foreach (モデル内の変数項目)
    {
        if (item.Sons != null && item.Sons.Count > 0)
        {
               
       

• 
              @item.MenuName
             
  
                  @foreach (item.Sons の var sub)
                  {
                      if (sub.Sons != null && item.Sons.Count > 0)
                      {
  • 
                            @sub.MenuName
                           
    
                                @foreach (sub.Sons の内部変数)
                                {
                                   
    • 
                                          @inner.MenuName
                                     
    
                                }

    
                       
  
                     

  }

  else
                                                                 {
                                                                                                                                                                                                                        

  • @sub.MenuName
  
                   }
                  }
                                                    
  
                                                                                          }
          else
             {
                                                                                                                             }
  }
  

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

.

Thank you for reading! Article source Zhang Zhanling