Bootstrap 5导航栏响应式模式无法关闭问题求助

问题根源 #

你的代码存在HTML结构违规：在<option>标签内嵌套<a>标签不符合HTML规范，这种错误结构会干扰Bootstrap导航栏的JS交互逻辑，直接导致折叠面板无法正常关闭。

修正后的代码 #

首先修复select的结构，移除option内的a标签，若需跳转功能，后续用JS实现：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌名称</a>
    <!-- 导航栏触发按钮，必须确保data-bs-target与collapse的id一致 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
            aria-expanded="false" aria-label="切换导航">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav mb-2 mb-lg-0">
        <li class="nav-item active">
          <select class="users" id="users">
            <option value="#user">User</option>
            <option value="#employee">Employee</option>
            <option value="#admin">Admin</option>
          </select>
        </li>
      </ul>
    </div>
  </div>
</nav>

额外检查项 #

• 确认已正确引入依赖库：先引入Popper.js，再引入Bootstrap 5的JavaScript文件，二者缺一不可，顺序不能颠倒。
• 若需要选择选项后跳转页面，添加以下JS代码：

document.getElementById('users').addEventListener('change', function() {
  const targetUrl = this.value;
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

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