Bootstrap 5导航栏Dropdown异常：未点击却始终处于展开状态

问题说明 #

使用Bootstrap 5构建导航栏Dropdown组件时，出现与官方文档不符的异常：下拉菜单未点击就始终处于展开状态，无法通过点击触发展开/收起。

问题原因 #

1. CSS样式冲突：自定义CSS中强制设置了.dropdown-menu { display: block; }，直接覆盖了Bootstrap默认的display: none初始隐藏样式，导致菜单一直显示。
2. 触发属性缺失：Dropdown的触发链接缺少data-bs-toggle="dropdown"属性，Bootstrap无法识别并绑定点击交互逻辑。

修复步骤 #

1. 调整CSS样式 #

移除自定义CSS中.dropdown-menu的display: block声明，仅保留背景色设置：

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

.dropdown-menu { 
    /* 移除display: block; 保留背景色 */
    background-color: hsl(210, 45%, 30%);
}

.dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
}

2. 完善Dropdown触发元素 #

给"Services"的触发链接添加data-bs-toggle="dropdown"属性：

<li class="nav-item dropdown" id="dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="nav_service_object">
    Services
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item text-capitalize text-white" href="/Bootstrap-/cctv.html">CCTV Services</a></li>
    <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/datacenter.html">Datacenter Support</a></li>
    <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/digital-signage.html">Digital Signage</a></li>
    <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/gen-support.html">General Support</a></li>
    <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/net-support.html">Network Support</a></li>
    <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/pos.html">POS Services</a></li>
    <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/telecom.html">Telecom Services</a></li>
  </ul>
</li>

验证说明 #

修改完成后，下拉菜单会默认隐藏，点击"Services"链接即可触发展开/收起，完全符合Bootstrap官方的交互逻辑。需确保页面已正确引入Bootstrap的JS文件（bootstrap.bundle.min.js），这是Dropdown交互生效的必要条件。

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