Bootstrap 4 でマルチレベルのドロップダウンを作成するにはどうすればよいですか?

Bootstrap 4 の複数レベルのドロップダウン

Bootstrap 4 を使用する場合、ナビゲーション バー内に複数レベルのドロップダウンを組み込むと、問題が発生することがあります。ただし、CSS と JavaScript を組み合わせれば、これらのドロップダウンの作成は比較的簡単です。

マルチレベル ドロップダウン用の CSS

マルチレベル ドロップダウンを実現するには、追加の CSS クラスが必要です。導入:

• .dropdown-submenu: このクラスは、サブドロップダウンを含む親メニュー項目に適用されます。
• .dropdown- menu: このクラスはsub-dropdown.
• .dropdown-item: このクラスは、サブドロップダウン内のすべての項目に適用されます。

次の 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;
}

マルチレベル用の 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;
});

このコードは、サブドロップダウン内の任意の項目にイベント リスナーをアタッチします。クラスのドロップダウン切り替えがあります。項目をクリックすると、サブドロップダウンの表示クラスが切り替わり、一度に 1 つのサブドロップダウンだけが開かれるようになります。

HTML との統合

以下に示すように、HTML コードにマルチレベルのドロップダウンに必要なクラスを追加するだけです。例:

<nav>

これらの CSS ルールと JavaScript を利用すると、Bootstrap 4 のナビゲーション バー内にマルチレベルのドロップダウンを簡単に作成でき、ユーザーフレンドリーで直感的なナビゲーション エクスペリエンスを提供できます。

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