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

Bootstrap 4: ナビゲーション内のマルチレベル ドロップダウンの解放

Bootstrap 4 にマルチレベル ドロップダウンを組み込むシームレスな方法を求める場合は、もう探す必要はありません。次の CSS と JavaScript スニペットは、プロセスをガイドします。

ドロップダウン サブメニューの 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;
}

サブメニューの JavaScript Toggle

この 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;
});

HTML の例

CSS と JavaScript を組み込むと、次のようになります。 HTML の例は、機能的な 3 レベルを示しています

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="http://example.com">

これらの手順を使用すると、Bootstrap 4 内でのユーザー ナビゲーションと対話を強化する複数レベルのドロップダウンを簡単に作成およびカスタマイズできます。

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