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() 并同步属性：
- 确保已加载
bootstrap.bundle.min.js（含 Popper），否则bootstrap.Dropdown不存在 - 目标
.dropdown元素需有唯一 ID 或可稳定选取的选择器（如#mobile-main-dropdown） - 不能在
DOMContentLoaded里立刻调用show()——得等 Bootstrap 自动初始化完成，推荐用setTimeout(..., 0)或监听shown.bs.dropdown事件回退 - 手动设置
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 可能多次执行，导致菜单闪动或状态混乱：
- 不要靠
window.matchMedia监听并反复show()/hide()——Dropdown 不支持“条件性保持展开” - 更稳妥的做法：只在首次加载且匹配移动端时触发一次，用
sessionStorage标记是否已执行过 - 如果页面支持服务端渲染（SSR），建议在 HTML 中就预设好
show类 + 同步属性，再用 JS 补初始化，避免白屏闪烁 - 注意：Bootstrap 5.3+ 的
data-bs-auto-close="outside"默认开启，点击外部会自动收起——若需常驻展开，请显式设为data-bs-auto-close="false"
真正麻烦的不是怎么让它展开，而是展开之后怎么维持可访问性、不破坏 Popper 定位、不和后续用户操作冲突。很多项目卡在这里，不是 JS 写错了，是忘了同步 aria-expanded 或没处理好初始化时机。
