要在Bootstrap 導(dǎo)航欄中創(chuàng)建多級下拉菜單，1. 需通過嵌套

結(jié)構(gòu)構(gòu)建多級菜單；2. 添加自定義CSS 控制子菜單位置，如設(shè)置.dropdown-submenu 的相對定位及.dropdown-menu 的左偏移；3. 使用data-bs-toggle="dropdown" 或自定義JS 實現(xiàn)子菜單展開邏輯，如點擊切換顯示狀態(tài)；4. 優(yōu)化移動端交互，建議改為點擊展開、限制層級並考慮使用折疊菜單適配觸屏操作。



Bootstrap 的導(dǎo)航欄（navbar）默認只支持單層下拉菜單，但很多時候我們希望在導(dǎo)航裡添加多級子菜單（比如鼠標(biāo)懸?；螯c擊後展開第二級甚至第三級菜單）。實現(xiàn)這個功能其實不難，主要是通過自定義CSS 和JS 來擴展Bootstrap 的原生功能。



下面就是具體的操作方法和注意事項：

---

如何在Bootstrap 導(dǎo)航欄中創(chuàng)建多級下拉菜單

Bootstrap 本身並不直接支持多級下拉菜單，所以你需要手動修改HTML 結(jié)構(gòu)，並配合一些CSS 或JavaScript 來讓二級菜單顯示出來。關(guān)鍵點在於正確嵌套<ul></ul>元素，並控制它們的顯示方式。



基本結(jié)構(gòu)如下：

 <ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">一級菜單</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">子菜單1</a></li>
      <li class="dropdown-submenu">
        <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">帶子菜單的項</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">二級菜單1</a></li>
          <li><a class="dropdown-item" href="#">二級菜單2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

這樣就能構(gòu)建出一個基本的多級結(jié)構(gòu)了，但還需要樣式支持才能正常顯示。



---

添加CSS 樣式來控制子菜單的位置

默認情況下，Bootstrap 的.dropdown-menu是隱藏的，而且即使你設(shè)置了嵌套的.dropdown-menu ，它也會出現(xiàn)在父級菜單的下方，而不是旁邊。

你需要添加一段CSS 來讓它水平顯示，並定位到合適的位置：

 .dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

這段CSS 讓子菜單向右彈出，貼著父菜單顯示。如果你希望從右往左彈出，可以改成right: 100% 。

---

使用JavaScript 控制子菜單的觸發(fā)方式

雖然Bootstrap 提供了data-bs-toggle="dropdown"屬性來控制一級菜單的顯示，但對於二級菜單，默認是不會自動展開的。你可以選擇以下幾種方式處理：

• 使用Bootstrap 的Dropdown 插件：給子菜單的鏈接加上data-bs-toggle="dropdown"屬性。
• 添加自定義JS ：防止點擊時菜單關(guān)閉，或者在懸停時自動展開。

例如：

 document.querySelectorAll('.dropdown-submenu > a').forEach(link => {
  link.addEventListener('click', function (e) {
    e.stopPropagation();
    e.preventDefault();
    const submenu = this.nextElementSibling;
    submenu.classList.toggle('show');
  });
});

這可以讓用戶點擊帶子菜單的項時，手動切換子菜單的顯示狀態(tài)。

---

移動端適配和交互優(yōu)化

多級菜單在移動端可能不太友好，特別是嵌套太深的時候。建議做以下幾點優(yōu)化：

• 在小屏幕上禁用子菜單的懸停行為，改為點擊展開。
• 避免嵌套太多層級，最多兩層為宜。
• 考慮使用折疊菜單（Collapse）代替下拉菜單，更適合觸屏操作。

---

基本上就這些。實現(xiàn)多級下拉菜單的關(guān)鍵在於結(jié)構(gòu)嵌套、CSS 定位和適當(dāng)?shù)慕换ミ壿??？雌饋聿粡?fù)雜，但在實際項目中容易忽略細節(jié)，尤其是響應(yīng)式設(shè)計部分。

以上是如何在Bootstrap Navbar中創(chuàng)建多層下拉列表？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！