如何实现Bootstrap 5手风琴同步切换左右内容并修复图片堆叠问题？

问题描述 #

用Bootstrap 5实现手风琴组件后，期望点击不同手风琴项时，左侧展开对应内容的同时右侧图片同步切换，但实际运行中右侧图片出现堆叠，无法在同一位置正常切换。

问题根源 #

1. ID重复：左侧手风琴的内容折叠容器与右侧图片折叠容器使用了相同ID，违反HTML ID唯一性规则，导致Bootstrap折叠组件逻辑混乱。
2. 无统一定位容器：右侧图片容器未设置固定定位区域，折叠显示的图片会占用文档流空间，引发堆叠。

解决方案 #

步骤1：修正ID唯一性 #

给右侧图片折叠容器设置独立ID，比如img-collapseOne、img-collapseTwo等，与左侧手风琴内容容器ID彻底区分。

步骤2：修改按钮触发目标 #

每个手风琴按钮需同时控制左侧内容和右侧图片的折叠状态，修改data-bs-target属性，用逗号分隔两个目标选择器，例如data-bs-target="#flush-collapseOne, #img-collapseOne"。

步骤3：添加定位容器固定图片位置 #

给右侧所有图片折叠容器套一个相对定位的外层容器，让折叠的图片容器使用绝对定位，确保所有图片都在同一位置显示。

修改后的完整代码 #

<section class="various__sect">
    <div class="container">
        <div class="row">
            <div class="col-6 various__left__group">
                <div class="various__title">
                    Various Kinds of Finances Products
                </div>
                <div class="various__accordion">
                    <div class="accordion accordion-flush" id="accordionFlushExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne">
                                <button id="collapseOne" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne, #img-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne img-collapseOne">
                                    1. We have features that help your finances
                                </button>
                            </h2>
                            <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    With this scan features, it can make transactions faster and safer, of course
                                    <div class="mt-3">
                                        <a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingTwo">
                                <button id="collapseTwo" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo, #img-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo img-collapseTwo">
                                    2. All kinds of activities regarding finances
                                </button>
                            </h2>
                            <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    With this scan features, it can make transactions faster and safer, of course
                                    <div class="mt-3">
                                        <a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingThree">
                                <button id="collapseThree" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree, #img-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree img-collapseThree">
                                    3. Various of needs regarding finance here
                                </button>
                            </h2>
                            <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    With this scan features, it can make transactions faster and safer, of course
                                    <div class="mt-3">
                                        <a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingFour">
                                <button id="collapseFour" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour, #img-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour img-collapseFour">
                                    4. Only here you will get various benefits
                                </button>
                            </h2>
                            <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    With this scan features, it can make transactions faster and safer, of course
                                    <div class="mt-3">
                                        <a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="offset-1 col-5">
                <!-- 相对定位容器，固定图片位置 -->
                <div class="position-relative" style="min-height: 400px;">
                    <div class="collapse show multi-collapse position-absolute w-100" id="img-collapseOne">
                        <div class="img__collapse">
                            <img src="assets/img/img-various.webp" alt="">
                        </div>
                    </div>
                    <div class="collapse multi-collapse position-absolute w-100" id="img-collapseTwo">
                        <div class="img__collapse">
                            <img src="assets/img/img-various.webp" alt="">
                        </div>
                    </div>
                    <div class="collapse multi-collapse position-absolute w-100" id="img-collapseThree">
                        <div class="img__collapse">
                            <img src="assets/img/img-various.webp" alt="">
                        </div>
                    </div>
                    <div class="collapse multi-collapse position-absolute w-100" id="img-collapseFour">
                        <div class="img__collapse">
                            <img src="assets/img/img-various.webp" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

补充说明 #

• 外层position-relative容器的min-height需根据实际图片高度调整，确保图片区域有固定占位。
• 图片折叠容器添加position-absolute w-100，让所有图片都定位在同一区域，不占用文档流空间，避免堆叠。
• 手风琴按钮的data-bs-target同时关联左侧内容和右侧图片容器，实现点击时同步切换。

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