Bootstrap下拉菜单无法展开问题求助

你的下拉菜单无法展开的核心原因是触发按钮的跳转行为干扰了Bootstrap的下拉逻辑：

触发按钮<a>标签同时设置了href="/page1"，点击时浏览器会优先执行页面跳转，直接打断了Bootstrap用于展开下拉菜单的JavaScript事件，导致菜单没机会展开就跳走了。

解决方案 #

根据你的需求选择以下任意一种：

方案1（推荐）：移除触发按钮的跳转属性

如果这个下拉触发按钮不需要直接跳转功能，直接把href="/page1"改成href="#"，或者直接移除href属性：

<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu 1</a>

这样点击按钮时只会触发下拉展开，用户可以通过下拉菜单里的选项跳转到目标页面。

方案2：阻止默认跳转行为（保留href）

如果需要保留触发按钮的href，但希望点击时先展开下拉而非直接跳转，可以给按钮添加onclick事件阻止默认跳转：

<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="/page1" role="button" aria-expanded="false" onclick="event.preventDefault();">Menu 1</a>

这种情况下，点击按钮只会展开下拉，用户若要跳转需点击下拉菜单内的选项。

验证其他配置 #

你的Bootstrap 5资源引用（CSS和包含Popper的bundle.js）是正确的，下拉菜单的结构、data-bs-toggle="dropdown"属性也符合要求，修改上述触发按钮后即可正常展开下拉菜单。

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