Bootstrap如何设置下拉菜单在手机端默认展开

Bootstrap下拉菜单在手机端无默认展开支持，必须用JS触发show()并同步aria-expanded等状态，否则会导致可访问性问题、定位异常和交互错乱。

Bootstrap 下拉菜单（dropdown）在手机端没有“默认展开”的原生支持逻辑，强行让它一打开就展开，本质是绕过 Bootstrap 的交互设计，必须用 JS 主动触发，并注意时机和状态同步。

为什么直接加 show 类不管用

给 .dropdown-menu 直接加 show 类，页面加载时它确实会显示，但：

• .dropdown 容器本身没被标记为激活态，.dropdown-toggle 按钮的 aria-expanded 仍是 false；

• 屏幕阅读器无法正确识别当前状态；

• 用户点击按钮时，Bootstrap 会按“从关闭态切换”处理，反而先收起再展开，行为错乱；

• 如果用了 Popper 定位（默认开启），position: absolute 的 .dropdown-menu 在未触发 JS 初始化前可能定位偏移或消失。

必须用 JS 触发并同步状态

要在移动端（比如 max-width: 991.98px）让某个下拉菜单默认展开，得等 DOM 加载完、Bootstrap 实例初始化后，再手动调用 show() 并同步属性：

1. 确保已加载 bootstrap.bundle.min.js（含 Popper），否则 bootstrap.Dropdown 不存在
2. 目标 .dropdown 元素需有唯一 ID 或可稳定选取的选择器（如 #mobile-main-dropdown）
3. 不能在 DOMContentLoaded 里立刻调用 show()——得等 Bootstrap 自动初始化完成，推荐用 setTimeout(..., 0) 或监听 shown.bs.dropdown 事件回退
4. 手动设置 aria-expanded="true" 和 .dropdown-toggle 的 aria-haspopup="true"（若缺失）

示例代码（针对第一个移动端下拉）：

document.addEventListener('DOMContentLoaded', () => {const dropdownEl = document.querySelector('.dropdown.d-md-none');if (dropdownEl && window.bootstrap) {setTimeout(() => {const dropdown = bootstrap.Dropdown.getInstance(dropdownEl);if (!dropdown) {new bootstrap.Dropdown(dropdownEl).show();} else {dropdown.show();}const toggle = dropdownEl.querySelector('.dropdown-toggle');if (toggle) {toggle.setAttribute('aria-expanded', 'true');}}, 0);}});

响应式场景下要防重复触发

如果用户横竖屏切换或缩放页面，窗口宽度反复进出移动端断点，这段 JS 可能多次执行，导致菜单闪动或状态混乱：

1. 不要靠 window.matchMedia 监听并反复 show()/hide()——Dropdown 不支持“条件性保持展开”
2. 更稳妥的做法：只在首次加载且匹配移动端时触发一次，用 sessionStorage 标记是否已执行过
3. 如果页面支持服务端渲染（SSR），建议在 HTML 中就预设好 show 类 + 同步属性，再用 JS 补初始化，避免白屏闪烁
4. 注意：Bootstrap 5.3+ 的 data-bs-auto-close="outside" 默认开启，点击外部会自动收起——若需常驻展开，请显式设为 data-bs-auto-close="false"

真正麻烦的不是怎么让它展开，而是展开之后怎么维持可访问性、不破坏 Popper 定位、不和后续用户操作冲突。很多项目卡在这里，不是 JS 写错了，是忘了同步 aria-expanded 或没处理好初始化时机。