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

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

這個問題的核心在于 Bootstrap 默認不會主動關(guān)閉下拉菜單，除非用戶再次點擊觸發(fā)區(qū)域或者點擊頁面其他地方。那我們該怎么解決呢？

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

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

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

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

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

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

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

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

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

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

這樣每次點擊這個鏈接時，下拉菜單就會自動關(guān)閉。

方法二：用 JS 手動控制

如果你不想修改 HTML 結(jié)構(gòu)，也可以通過 JS 控制。比如監(jiān)聽所有 dropdown-item 的點擊事件，然后手動關(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. 檢查是否阻止了默認事件

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

例如下面這種情況：

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

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

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

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

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

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

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