Bootstrap 5实现不同屏幕尺寸下折叠面板默认状态切换

针对Bootstrap 5.2.1的折叠组件，要实现大屏默认展开、小屏默认折叠且任意屏幕可手动切换的效果，需要结合组件API和少量JS逻辑来处理响应式状态，具体实现如下：

1. 调整HTML结构 #

设置折叠容器初始为展开状态（添加show类），同时匹配按钮的aria-expanded属性：

<div class="card border-primary map-layer">
    <h4 class="card-header bg-primary text-white">
        Header
        <span class="float-end">
            <a class="btn btn-light btn-sm" data-bs-toggle="collapse" href="#collapseMenu" role="button" aria-expanded="true" aria-controls="collapseMenu"><i class="fas fa-bars"></i></a>
        </span>
    </h4>
    <div class="collapse show" id="collapseMenu">
        <div class="card-body">
            Some text here
        </div>
    </div>
</div>

2. 添加JavaScript控制逻辑 #

这段代码会处理初始状态、窗口尺寸变化，并保留用户手动切换的状态：

const collapseEl = document.getElementById('collapseMenu');
const toggleBtn = document.querySelector('[href="#collapseMenu"]');
let hasUserToggled = false;

// 根据屏幕尺寸设置折叠状态（仅当用户未手动操作时生效）
function setCollapseState() {
    if (hasUserToggled) return;
    const isLgScreen = window.matchMedia('(min-width: 992px)').matches;
    const collapse = new bootstrap.Collapse(collapseEl, { toggle: false });
    
    if (isLgScreen) {
        collapse.show();
        toggleBtn.setAttribute('aria-expanded', 'true');
    } else {
        collapse.hide();
        toggleBtn.setAttribute('aria-expanded', 'false');
    }
}

// 监听折叠事件，标记用户已手动操作
collapseEl.addEventListener('show.bs.collapse', () => hasUserToggled = true);
collapseEl.addEventListener('hide.bs.collapse', () => hasUserToggled = true);

// 初始化+监听窗口 resize
setCollapseState();
window.addEventListener('resize', setCollapseState);

原理说明 #

• 初始加载时，通过媒体查询判断屏幕尺寸，自动设置折叠状态：大屏展开，小屏折叠
• 用户手动点击切换按钮后，hasUserToggled标记为true，后续窗口大小变化不再自动修改状态，保留用户的选择
• 使用Bootstrap官方的CollapseAPI控制状态，确保组件动画、ARIA属性与状态同步，避免直接操作CSS导致的冲突

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