Bootstrap 5 Collapse组件dispose方法失效问题求助

为什么dispose看起来没效果？ #

Bootstrap 5的dispose()方法和jQuery版本的组件销毁逻辑不一样：它只会销毁Collapse实例、解绑内部事件监听、移除元素上存储的实例数据，但不会修改DOM结构、不会移除触发按钮的data-bs-toggle属性，也不会改变折叠内容的显示状态。所以你调用dispose后，点击Toggle按钮时，Bootstrap会重新创建一个新的Collapse实例，导致看起来“没效果”。

针对移动端显示、桌面端禁用的解决方案 #

要实现这个响应式需求，需要结合窗口大小监听，动态控制Collapse实例的创建/销毁，同时处理触发按钮和内容的状态：

修改后的代码示例

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<a class="btn btn-primary collapse-trigger" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Toggle Collapse
</a>

<div id="collapseExample" class="collapse">
    <div class="card card-body">
        This is the content of the collapse. It will be disposed on desktop view and recreated on mobile view.
    </div>
</div>

const collapseEl = document.querySelector('#collapseExample');
const triggerEl = document.querySelector('.collapse-trigger');
let collapseInstance = null;

// 处理响应式逻辑的函数
function handleResponsiveCollapse() {
    const isMobile = window.innerWidth < 768; // 对应Bootstrap的md断点，可按需调整

    if (isMobile) {
        // 移动端：初始化Collapse，恢复触发按钮功能
        if (!collapseInstance) {
            collapseInstance = new bootstrap.Collapse(collapseEl, {
                toggle: false // 保持当前状态，不自动切换
            });
        }
        triggerEl.setAttribute('data-bs-toggle', 'collapse');
        triggerEl.style.display = 'inline-block';
    } else {
        // 桌面端：销毁实例，禁用触发按钮，直接显示内容
        if (collapseInstance) {
            collapseInstance.dispose();
            collapseInstance = null;
        }
        triggerEl.removeAttribute('data-bs-toggle');
        triggerEl.style.display = 'none';
        collapseEl.classList.remove('collapse'); // 让内容始终显示
    }
}

// 页面初始化时执行一次
handleResponsiveCollapse();

// 监听窗口大小变化，实时调整
window.addEventListener('resize', handleResponsiveCollapse);

关键说明 #

• 用window.innerWidth判断设备类型，对应Bootstrap的官方断点（768px是md断点，可根据你的布局需求修改）。
• 桌面端时，除了调用dispose()，还要移除触发按钮的data-bs-toggle属性、隐藏按钮，同时移除collapse类让内容直接展示。
• 移动端时，重新初始化Collapse实例，恢复触发按钮的属性，确保折叠功能正常工作。

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