要讓Bootstrap dropdown 在hover 時(shí)彈出，可通過(guò)以下方法實(shí)現(xiàn)：1. 使用CSS 控制，通過(guò):hover偽類控制下拉菜單顯示，適合輕量項(xiàng)目但可能存在兼容性問(wèn)題；2. 使用JavaScript 手動(dòng)觸發(fā)，在mouseenter 和mouseleave 事件中調(diào)用Dropdown 實(shí)例的toggle 和hide 方法，提升交互控制力；3. 使用第三方插件如bootstrap-hover-dropdown 或Mega Dropdown，適合功能複雜、響應(yīng)式要求高的項(xiàng)目。每種方式各有優(yōu)劣，需根據(jù)實(shí)際需求選擇。

在使用Bootstrap 構(gòu)建導(dǎo)航欄時(shí)，很多人希望下拉菜單（dropdown）能在鼠標(biāo)懸停（hover）時(shí)觸發(fā)，而不是默認(rèn)的點(diǎn)擊（click）方式。這對(duì)於桌面端體驗(yàn)更友好，但Bootstrap 默認(rèn)並不支持這種方式，需要額外設(shè)置。

下面介紹幾種實(shí)現(xiàn)Bootstrap 導(dǎo)航欄下拉菜單在hover 時(shí)展開的方法：

如何讓Bootstrap dropdown 在hover 時(shí)彈出？

Bootstrap 的dropdown 插件默認(rèn)是通過(guò)點(diǎn)擊來(lái)切換下拉菜單，不過(guò)可以通過(guò)修改JavaScript 行為或使用CSS 來(lái)實(shí)現(xiàn)hover 效果。

最常見(jiàn)的方式有：

• 使用純CSS 控制
• 結(jié)合JS 手動(dòng)觸發(fā)
• 使用第三方插件

其中，CSS 方法簡(jiǎn)單快捷，適合輕量項(xiàng)目；JS 方法更靈活，兼容性更好；而插件方案適合需要多功能支持的場(chǎng)景。

使用CSS 實(shí)現(xiàn)hover 展開下拉菜單

如果你不想改動(dòng)太多代碼，可以嘗試用CSS 覆蓋默認(rèn)行為。這種方法適用於大多數(shù)現(xiàn)代瀏覽器，尤其適合靜態(tài)網(wǎng)站或不需要復(fù)雜交互的場(chǎng)景。

 .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
}

注意點(diǎn)：

• 需要確保.dropdown-menu在hover 時(shí)不被隱藏
• 可能會(huì)導(dǎo)致移動(dòng)端點(diǎn)擊失效（因?yàn)闆](méi)有點(diǎn)擊事件）
• 如果你使用的是Bootstrap 5，默認(rèn)不加載Popper.js 和dropdown 插件，需手動(dòng)引入

這個(gè)方法雖然簡(jiǎn)單，但在實(shí)際開發(fā)中容易出現(xiàn)“鼠標(biāo)移出後菜單仍顯示”或“菜單閃動(dòng)”的問(wèn)題，建議結(jié)合JS 做一些優(yōu)化。

用JavaScript 強(qiáng)制觸發(fā)hover 時(shí)的dropdown 顯示

如果你希望在不影響移動(dòng)端的前提下同時(shí)支持hover 和click，可以用JS 來(lái)控制。

 document.querySelectorAll('.navbar-nav .nav-link.dropdown-toggle').forEach(link => {
    link.addEventListener('mouseenter', function () {
        bootstrap.Dropdown.getOrCreateInstance(this).toggle();
    });

    link.addEventListener('mouseleave', function () {
        setTimeout(() => {
            if (!this.matches(':hover') && !this.nextElementSibling.matches(':hover')) {
                bootstrap.Dropdown.getOrCreateInstance(this).hide();
            }
        }, 100);
    });
});

優(yōu)點(diǎn)：

• 更可控，可配合popper.js 使用
• 支持hover click 混合操作
• 兼容性較好

缺點(diǎn)：

• 需要寫一點(diǎn)JS 邏輯
• 移動(dòng)端可能需要額外處理點(diǎn)擊事件

第三方插件推薦：bootstrap-hover-dropdown 或megamenu 插件

如果想省事又需要更多功能（比如mega menu、多級(jí)菜單等），可以考慮使用專門為此設(shè)計(jì)的插件，如：

• bootstrap-hover-dropdown
• Mega Dropdown by Creative Tim

這些插件通常已經(jīng)處理好了各種邊界情況，包括響應(yīng)式、動(dòng)畫、延遲關(guān)閉等問(wèn)題，適合中大型項(xiàng)目使用。

總的來(lái)說(shuō)，實(shí)現(xiàn)Bootstrap 下拉菜單在hover 時(shí)展開其實(shí)不難，關(guān)鍵是根據(jù)項(xiàng)目需求選擇合適的方法。如果是小型項(xiàng)目或僅用於桌面展示，CSS 方案已經(jīng)足夠；如果對(duì)交互要求較高，建議用JS 控製或使用插件。

基本上就這些，別看步驟多，其實(shí)一兩個(gè)小腳本就能搞定。

以上是Bootstrap Navbar下拉懸停而不是單擊的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！