Bootstrap 5导航栏下拉菜单点击异常问题求助

问题核心矛盾 #

• 桌面端靠CSS hover实现下拉显示，但保留data-bs-toggle="dropdown"后，点击会触发Bootstrap原生下拉逻辑，导致重复弹出下拉菜单
• 移除该属性后，桌面端点击问题解决，但移动端失去点击触发下拉的能力

本质是同时启用了两种下拉触发方式：自定义hover CSS + Bootstrap原生点击JS，两者冲突导致异常。

解决方案 #

保留data-bs-toggle="dropdown"属性，通过媒体查询控制hover样式仅在桌面端生效，移动端沿用Bootstrap原生点击触发逻辑。

1. 保留原有HTML结构（不要移除data-bs-toggle） #

<div class="collapse navbar-collapse" id="navbarCollapse">
    <div class="navbar-nav mx-auto bg-light pe-4 py-3 py-lg-0">
        <a href="index.html" class="nav-item nav-link">welcom</a>
        <a href="about.html" class="nav-item nav-link">About </a>
        <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Project</a>
            <div class="dropdown-menu bg-light border-0 m-0">
                <a href="electronic.html" class="dropdown-item">Electronic</a>
                <a href="industrial.html" class="dropdown-item ">Industrial</a>
                <a href="diving.html" class="dropdown-item">Diving</a>
            </div>
        </div>
        <a href="contact.html" class="nav-item nav-link">Contact</a>
    </div>
</div>

2. 修改CSS规则 #

找到你CSS中控制hover显示下拉的代码，将其包裹在Bootstrap navbar桌面断点的媒体查询中（默认断点为min-width: 992px）：

/* 仅在桌面端启用hover下拉逻辑 */
@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    /* 可选：hover时导航链接的样式调整也放到这里 */
    .dropdown:hover .nav-link.dropdown-toggle {
        /* 比如颜色、背景色变化等 */
    }
}

逻辑说明 #

• 桌面端（≥992px）：hover通过CSS显示下拉，点击时Bootstrap JS触发的下拉会与已显示的菜单合并，不会出现重复；点击其他区域或hover离开时，JS和CSS共同控制菜单关闭，逻辑统一。
• 移动端（<992px）：hover逻辑不生效，完全依赖data-bs-toggle的点击触发，符合移动端交互习惯。

内容的提问来源于stack exchange，提问作者robert trudel