Bootstrap 5导航栏下拉链接点击无效及悬停展开问题求助

问题根源 #

Bootstrap 5内置JS会拦截带有data-bs-toggle="dropdown"属性的<a>标签点击事件，优先触发下拉菜单显示，导致链接无法正常跳转，这就是你点击「各教室のご案内」无法打开courses.html的原因。

解决方案步骤 #

1. 修改HTML结构

移除下拉触发链接的data-bs-toggle="dropdown"属性，解除Bootstrap对点击事件的拦截：

<div class="col my-auto" style="padding-right: 0;padding-left: 0;">
    <nav class="navbar navbar-expand-lg col">
        <div class="container-fluid">
            <div id="offcanvasNavbar" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header"><button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button></div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav flex-grow-1 justify-content-end pe-3">
                        <li class="nav-item"><a class="nav-link active" aria-current="page" href="home.html" style="font-family: 'Zen Old Mincho', serif;">ホーム</a></li>
                        <!-- 移除data-bs-toggle="dropdown"属性 -->
                        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" aria-expanded="false" href="courses.html" role="button">各教室のご案内</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">瑞艸書道教室</a></li>
                                <li><a class="dropdown-item" href="#">日本語教室</a></li>
                                <li><a class="dropdown-item" href="#">いけばな教室</a></li>
                            </ul>
                        </li>
                        <li class="nav-item bg-primary bg-opacity-50"><a class="nav-link active" href="access.html">教室情報</a></li>
                        <li class="nav-item"><a class="nav-link" href="news.html">お知らせ</a></li>
                    </ul>
                </div>
            </div><button class="navbar-toggler ms-auto" data-bs-toggle="offcanvas" type="button" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        </div>
    </nav>
</div>

2. 完善悬停展开的CSS

确保桌面端悬停展开下拉菜单的逻辑正常，若之前的CSS不够完善，添加以下代码：

/* 桌面端（≥992px）悬停展开下拉菜单 */
@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* 消除默认间距，避免悬停闪烁 */
  }
}

3. 适配移动端交互（可选）

移除data-bs-toggle="dropdown"后，移动端点击触发链接会直接跳转。若希望移动端点击时先展开下拉菜单，添加以下JS：

document.addEventListener('DOMContentLoaded', function() {
  const dropdownTrigger = document.querySelector('.nav-item.dropdown .dropdown-toggle');
  const dropdownMenu = dropdownTrigger.nextElementSibling;
  let clickHandler;

  function setupDropdown() {
    if (clickHandler) dropdownTrigger.removeEventListener('click', clickHandler);

    if (window.innerWidth < 992) {
      // 移动端：点击切换下拉菜单显示，阻止跳转
      clickHandler = function(e) {
        e.preventDefault();
        dropdownMenu.classList.toggle('show');
        dropdownTrigger.setAttribute('aria-expanded', dropdownMenu.classList.contains('show'));
      };
      dropdownTrigger.addEventListener('click', clickHandler);
    } else {
      // 桌面端：恢复跳转逻辑
      dropdownTrigger.setAttribute('aria-expanded', 'false');
      dropdownMenu.classList.remove('show');
    }
  }

  setupDropdown();
  window.addEventListener('resize', setupDropdown);
});

最终效果 #

• 桌面端：悬停「各教室のご案内」展开下拉菜单，点击该链接直接跳转到courses.html，子项点击跳转至对应锚点。
• 移动端（offcanvas内）：点击「各教室のご案内」展开下拉菜单，再次点击或点击其他区域收起，子项正常跳转。

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