ホームページ >ウェブフロントエンド >CSSチュートリアル >Bootstrap 4 でマルチレベルのドロップダウンを作成するには?
Bootstrap 4 でのマルチレベル ドロップダウンの作成は、CSS と JavaScript を最小限に変更するだけで実現できます。その方法は次のとおりです:
ナビゲーションにネストされた
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> ... <div class="collapse navbar-collapse">
次の 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 を追加します。
$('.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 サイトの他の関連記事を参照してください。