首頁 > web前端 > css教學 > 如何在 Bootstrap 4 中建立多層下拉式選單?

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

DDD
發布: 2024-12-17 14:54:14
原創
876 人瀏覽過

How to Create Multilevel Dropdowns in Bootstrap 4?

使用 Bootstrap 4 進行多層下拉導覽

只需最少的 CSS 和 JavaScript 修改即可在 Bootstrap 4 中建立多層下拉式選單。具體方法如下:

1. HTML 結構

確保您的導覽包含嵌套的

    元素如下:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  ...
  <div class="collapse navbar-collapse">
登入後複製

2.樣式

將以下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;
}
登入後複製

3. 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;
});
登入後複製

示範

此方法可讓您建立無縫整合至 Bootstrap 4 導覽中的複雜多層下拉式功能表。它確保一次僅打開一個子選單,防止重疊或嵌套衝突。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板