如何在大屏断点触发时将Accordion切换为Offcanvas？

核心思路是只保留一个Accordion实例，根据屏幕尺寸断点，动态将它在页面主容器和Offcanvas容器之间转移，从根源避免复制DOM导致的内容不同步问题。

步骤1：修改HTML结构 #

移除重复的Accordion代码，只保留一份实例；添加专用容器分别承载大屏和小屏状态下的Accordion，同时通过CSS控制触发按钮的显示/隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <style>
        /* 大屏（≥992px）：显示页面容器，隐藏Offcanvas触发按钮 */
        @media (min-width: 992px) {
            .desktop-accordion-container {
                display: block;
            }
            .offcanvas-trigger-btn {
                display: none;
            }
        }

        /* 小屏（<992px）：隐藏页面容器，显示触发按钮 */
        @media (max-width: 991.98px) {
            .desktop-accordion-container {
                display: none;
            }
            .offcanvas-trigger-btn {
                display: inline-block;
            }
        }
    </style>
</head>
<body>
<!-- 大屏时放置Accordion的容器 -->
<div class="desktop-accordion-container"></div>

<!-- 小屏时的Offcanvas触发按钮 -->
<a class="btn btn-primary offcanvas-trigger-btn" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
    Link to Accordion
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body" id="offcanvas-accordion-container">
        <!-- 唯一的Accordion实例 -->
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Accordion Item #1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Accordion Item #2
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <input type="text" placeholder="Search..."/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

步骤2：添加JavaScript逻辑 #

监听窗口加载和resize事件，根据屏幕尺寸动态转移Accordion实例，同时添加防抖避免频繁DOM操作：

<script>
    // 获取核心DOM元素
    const accordion = document.getElementById('accordionExample');
    const desktopContainer = document.querySelector('.desktop-accordion-container');
    const offcanvasContainer = document.getElementById('offcanvas-accordion-container');
    const offcanvasInstance = new bootstrap.Offcanvas(document.getElementById('offcanvasExample'));

    // 判断是否为大屏（匹配Bootstrap lg断点）
    function isLargeScreen() {
        return window.innerWidth >= 992;
    }

    // 执行Accordion容器切换
    function toggleAccordionContainer() {
        if (isLargeScreen()) {
            // 大屏模式：将Accordion移到页面容器，同时关闭Offcanvas
            if (accordion.parentNode === offcanvasContainer) {
                desktopContainer.appendChild(accordion);
                offcanvasInstance.hide();
            }
        } else {
            // 小屏模式：将Accordion移回Offcanvas容器
            if (accordion.parentNode === desktopContainer) {
                offcanvasContainer.appendChild(accordion);
            }
        }
    }

    // 页面加载时初始化
    window.addEventListener('load', toggleAccordionContainer);

    // 窗口resize时触发（防抖优化）
    let resizeTimeout;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(toggleAccordionContainer, 200);
    });
</script>
</body>
</html>

关键优势 #

• 内容完全同步：始终只有一个Accordion实例，输入内容、折叠状态在断点切换时不会丢失
• 贴合Bootstrap逻辑：使用官方lg断点作为切换依据，和框架响应式规则保持一致
• 性能优化：resize事件添加防抖，避免频繁DOM操作导致的卡顿
• 状态自动修正：大屏切换时自动关闭Offcanvas，避免界面异常

内容的提问来源于stack exchange，提问作者Alex R