Bootstrap 4 でマルチレベルのドロップダウンを作成するには?

Bootstrap 4 によるマルチレベル ドロップダウン ナビゲーション

Bootstrap 4 でのマルチレベル ドロップダウンの作成は、CSS と JavaScript を最小限に変更するだけで実現できます。その方法は次のとおりです:

1. HTML 構造

ナビゲーションにネストされた

が含まれていることを確認してください。そして

要素は次のとおりです:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  ...
  <div class="collapse navbar-collapse">

2. CSS スタイル

次の CSS をスタイルシートに追加します:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

3. JavaScript

最後に、次の JavaScript を追加します。

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });


  return false;
});

デモ

このアプローチにより、Bootstrap 4 ナビゲーションにシームレスに統合された複雑なマルチレベルのドロップダウンを作成できます。これにより、一度に 1 つのサブメニューだけが開かれるようになり、重複やネストの競合が防止されます。

以上がBootstrap 4 でマルチレベルのドロップダウンを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：Amazon S3 CORS での Firefox のクロスドメインフォント読み込みの問題を解決するにはどうすればよいですか? 次の記事：改行で消える水平リスト用のレスポンシブセパレーターを作成するにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• PHP `php://input` と `$_POST`: AJAX リクエストにどちらを使用すべきか?
  2024-12-18 05:52:13
• CSS を使用して Div 要素を垂直方向の中央に配置するにはどうすればよいですか?
  2024-12-18 05:51:09
• PHP の `startsWith()` 関数と `endsWith()` 関数はどのように機能するのでしょうか?また、それらに相当する組み込み関数は何ですか?
  2024-12-18 05:50:10
• PHP における MySQL と MySQLi: どのデータベース拡張機能を選択する必要がありますか?
  2024-12-18 05:49:10
• 「window.onload と document.onload: どちらのイベント ハンドラーの方がブラウザ互換性が優れていますか?」
  2024-12-18 05:48:10
• 関数が定義されているにもかかわらず、「go test」で「実行するテストがありません」と表示されるのはなぜですか?
  2024-12-18 05:47:13
• 疑似乱数ジェネレーター用の高品質なランダム シードを生成するにはどうすればよいでしょうか?
  2024-12-18 05:46:14
• React Router v6 を使用してカスタマイズされたレイアウトで React コンポーネントをレンダリングするにはどうすればよいですか?
  2024-12-18 05:45:09
• Python での循環インポートはどのように回避できますか?またその結果は何ですか?
  2024-12-18 05:44:14
• T-SQL で数値の書式設定のために数値と文字列を正しく連結するにはどうすればよいですか?
  2024-12-18 05:43:09

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2215

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2363

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1975

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1862

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1930

関連トピック

詳細>

• BAGSコインは長期保有できますか？
• imgファイルの開き方
• バイナンス公式サイト
• udpとはどのようなプロトコルですか?
• ドージコイン取引プラットフォーム
• postgresqlの一般的なコマンド
• recvとrecvfromの違い
• jquery each