如何在 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切換

此 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 範例示範了功能三級

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

透過這些步驟，您可以輕鬆建立和自訂多層下拉式選單，以增強Bootstrap 4 中的使用者導航和互動。

以上是如何在 Bootstrap 4 導覽中建立多層下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！