要解決 Bootstrap navbar dropdown 點(diǎn)擊選項(xiàng)后不關(guān)閉的問題，首先要確認(rèn)使用的是 Bootstrap 5 并正確引入依賴；其次可通過添加 data-bs-dismiss="dropdown" 屬性或用 JS 手動(dòng)控制關(guān)閉；同時(shí)避免濫用 e.preventDefault() 阻止默認(rèn)行為；在錨點(diǎn)跳轉(zhuǎn)等特殊場(chǎng)景下可結(jié)合其他方法處理。1. 確保使用 Bootstrap 5 并正確加載 CSS 和 JS；2. 推薦在 dropdown-item 上添加 data-bs-dismiss="dropdown"；3. 或通過 JS 監(jiān)聽點(diǎn)擊事件并調(diào)用 dropdown.hide() 方法關(guān)閉；4. 注意不要因 preventDefault() 導(dǎo)致菜單無法關(guān)閉；5. 錨點(diǎn)跳轉(zhuǎn)時(shí)可視情況結(jié)合 scroll 事件處理關(guān)閉邏輯。

在使用 Bootstrap 的 navbar dropdown 時(shí)，很多開發(fā)者會(huì)遇到一個(gè)問題：點(diǎn)擊下拉菜單中的某個(gè)選項(xiàng)后，菜單并不會(huì)自動(dòng)關(guān)閉。這雖然不是 Bootstrap 的 bug，但在實(shí)際開發(fā)中確實(shí)會(huì)影響用戶體驗(yàn)。

這個(gè)問題的核心在于 Bootstrap 默認(rèn)不會(huì)主動(dòng)關(guān)閉下拉菜單，除非用戶再次點(diǎn)擊觸發(fā)區(qū)域或者點(diǎn)擊頁面其他地方。那我們?cè)撛趺唇鉀Q呢？

1. 確保引入了正確的 Bootstrap 版本和依賴

首先確認(rèn)你用的是 Bootstrap 5（目前主流版本），因?yàn)閺?v5 開始不再依賴 jQuery，如果你還在用舊版的 Bootstrap 4 或更早，并且配合了 jQuery，可能會(huì)出現(xiàn)行為不一致的問題。

檢查 HTML 中是否正確引入了：

• Bootstrap CSS
• Bootstrap JS（最好是通過 @popperjs/core 和原生 ES Modules 引入）

如果只是復(fù)制粘貼了代碼但沒加載必要的腳本，dropdown 行為可能就不完整。

2. 添加手動(dòng)關(guān)閉邏輯（推薦方法）

默認(rèn)情況下，點(diǎn)擊 dropdown-item 并不會(huì)觸發(fā)關(guān)閉動(dòng)作。要讓它關(guān)閉，需要手動(dòng)添加一段 JavaScript 來移除 .show 類或調(diào)用 Bootstrap 的 API。

方法一：使用 data-bs-dismiss="dropdown" 屬性

這是最簡單的方法。只需要在每個(gè) <a></a> 標(biāo)簽上加上這個(gè)屬性即可：

<a class="dropdown-item" href="#" data-bs-dismiss="dropdown">Home</a>

這樣每次點(diǎn)擊這個(gè)鏈接時(shí)，下拉菜單就會(huì)自動(dòng)關(guān)閉。

方法二：用 JS 手動(dòng)控制

如果你不想修改 HTML 結(jié)構(gòu)，也可以通過 JS 控制。比如監(jiān)聽所有 dropdown-item 的點(diǎn)擊事件，然后手動(dòng)關(guān)閉：

document.querySelectorAll('.dropdown-item').forEach(item => {
  item.addEventListener('click', () => {
    const dropdown = bootstrap.Dropdown.getInstance(item.closest('.dropdown-toggle'));
    if (dropdown) {
      dropdown.hide();
    }
  });
});

注意這段代碼要在 DOM 加載完成后執(zhí)行，比如放在 DOMContentLoaded 里或者在 body 底部引入。

3. 檢查是否阻止了默認(rèn)事件

有時(shí)候我們會(huì)給鏈接加 e.preventDefault()，比如做異步請(qǐng)求時(shí)，這可能導(dǎo)致菜單無法正常關(guān)閉。

例如下面這種情況：

document.querySelector('.dropdown-item').addEventListener('click', function(e) {
  e.preventDefault(); // 這會(huì)導(dǎo)致默認(rèn)行為被阻止，包括關(guān)閉菜單
  // 做一些其他操作...
});

這時(shí)候即使你用了 data-bs-dismiss="dropdown"，也不會(huì)生效。所以要注意不要濫用 preventDefault()，或者在處理完邏輯后手動(dòng)調(diào)用 hide() 方法。

4. 使用錨點(diǎn)跳轉(zhuǎn)時(shí)的行為差異

如果你的 dropdown-item 是一個(gè)普通的錨點(diǎn)（如 #section1），并且希望點(diǎn)擊之后頁面滾動(dòng)過去并關(guān)閉菜單，那么除了上面的方法外，還可以考慮結(jié)合 scroll 事件或 IntersectionObserver 來判斷是否已經(jīng)到達(dá)目標(biāo)位置，再關(guān)閉菜單。

不過這種場(chǎng)景比較少見，大多數(shù)時(shí)候加個(gè) data-bs-dismiss="dropdown" 就夠用了。

基本上就這些。這個(gè)問題不復(fù)雜但容易忽略，尤其是在動(dòng)態(tài)生成菜單項(xiàng)或綁定事件的時(shí)候。只要記得 dropdown 不會(huì)自己關(guān)，需要手動(dòng)干預(yù)一下就行。

以上是Bootstrap Navbar下拉列表未關(guān)閉項(xiàng)目選擇的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！