如何在 Bootstrap 4 中建立多層下拉式選單？

Bootstrap 4 中的多層下拉式選單

使用Bootstrap 4 時，在導覽列中合併多層下拉式選單有時會帶來挑戰。然而，結合 CSS 和 JavaScript，建立這些下拉式選單相對簡單。

用於多層下拉式選單的CSS

為了實現多層下拉式選單，引入了額外的CSS 類別：

• .dropdown-submenu：這個類別是應用於包含子下拉清單的父選單項目。
• .dropdown-menu：此類應用於子下拉清單。
• 。 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;
});

此程式碼將事件偵聽器附加到子下拉清單中具有 dropdown-toggle 類別的任何項目。單擊某一項時，它會切換子下拉選單上的顯示類，確保一次只打開一個子下拉選單。

與HTML 整合

在HTML 程式碼中，只需新增多層下拉清單所需的類，如下所示範例：

<nav>

利用這些CSS 規則和JavaScript，您可以輕鬆地在Bootstrap 4中的導覽列中建立多層下拉式選單，提供使用者友好且直覺的導覽體驗。

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