コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > ブートストラップ～マルチレベルナビゲーション（カスケードナビゲーション）の導入効果【コード付き】_javascriptスキル

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

WBOY
リリース： 2016-05-16 15:11:38
オリジナル
1194 人が閲覧しました

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

    関連ラベル：
    bootstrap マルチレベルナビゲーション ナビゲーション
    ソース：php.cn
    前の記事：JavaScript は文字列と日付の間の変換と日付の書式設定を実装します_JavaScript スキル 次の記事：JSフォーム処理でラジオ選択、複数選択、選択ボックスの値を取得し、form_javascriptスキルをシリアル化する
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
    から 2024-04-06 21:58:04
    0
    1
    800
    CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
    から 2024-04-06 20:22:15
    0
    1
    454
    CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
    から 2024-04-06 12:53:11
    0
    1
    376
    Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...
    から 2024-04-05 08:45:39
    0
    1
    3443
    Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...
    から 2024-04-04 22:16:18
    0
    1
    1450
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート