Bootstrap 5.3手风琴组件data-bs-parent属性失效问题求助

嘿，我来帮你捋捋这个问题哈！你遇到的情况其实是布局结构打破了Bootstrap手风琴的原生关联逻辑～

咱们先说说根源：Bootstrap手风琴的data-bs-parent属性能生效，核心是所有可折叠的内容面板（.accordion-collapse）必须和对应的标题按钮，共同嵌套在同一个.accordion-item里，并且都归属于指定的#catAccordion容器。但你现在把标题放在左侧列的手风琴结构里，内容却单独放在右侧列，这就导致data-bs-parent找不到对应的关联面板，自然没法自动关闭其他展开的内容，就变成了“总是打开”的状态。

给你两个解决思路，按需选就行：

方案一：调整结构（推荐，符合Bootstrap原生逻辑） #

把每个标题对应的内容移到左侧列的.accordion-item里，然后用CSS把内容视觉上定位到右侧列。这样结构上满足Bootstrap的要求，data-bs-parent就能正常工作了。

示例代码大概是这样：

<div class="row justify-content-center">
    <!-- 左侧列：包含手风琴标题和隐藏的内容容器 -->
    <div class="col-4 position-relative">
      <div class="accordion accordion-flush" id="catAccordion">
        {% for topic in topic_list %}
          <div class="accordion-item">
            <h2 class="accordion-header" style="display:flex;">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ topic.id }}">
                {{ topic.title }}
              </button>
            </h2>
            <!-- 内容放在这里，用CSS移到右侧 -->
            <div id="collapse-{{ topic.id }}" class="accordion-collapse collapse" data-bs-parent="#catAccordion">
              <div class="accordion-body position-absolute top-0 left-100 w-[300px]">
                <!-- 这里放原本右侧列的内容 -->
                {{ topic.content }}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
    <!-- 不需要单独的右侧列了，内容通过CSS定位过去 -->
</div>

解释下CSS部分：position-absolute让内容脱离文档流，left:100%刚好对齐左侧列的右边，w-[300px]可以根据你的需求调整宽度，这样视觉上内容就在右侧，结构上还是和标题绑定的，data-bs-parent就能自动管理开闭了。

方案二：用JavaScript手动控制（适合不想改结构的情况） #

如果不想调整现有布局，可以写一段JS监听按钮点击，每次展开一个面板时，主动关闭其他所有已展开的面板，模拟data-bs-parent的效果。

示例代码：

// 获取所有手风琴按钮
const accordionButtons = document.querySelectorAll('.accordion-button');

accordionButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前要展开的目标面板ID
    const targetId = this.getAttribute('data-bs-target').slice(1);
    // 获取所有可折叠面板
    const allCollapses = document.querySelectorAll('.accordion-collapse');
    
    allCollapses.forEach(collapse => {
      // 如果不是当前目标面板，且处于展开状态，就关闭它
      if (collapse.id !== targetId && collapse.classList.contains('show')) {
        const collapseInstance = new bootstrap.Collapse(collapse, {
          toggle: false
        });
        collapseInstance.hide();
      }
    });
  });
});

这段代码会在你点击任意标题按钮时，遍历所有面板，只保留当前要展开的那个，其他展开的都关闭，实现“只能打开一个”的效果。

备注：内容来源于stack exchange，提问作者Ayukawa