如何实现Accordion标签始终保持一个打开，仅切换其他标签时关闭

要实现始终保持一个Accordion面板处于打开状态——即点击当前已打开的面板不会关闭它，只有点击其他面板时才自动切换关闭旧面板——可按以下步骤修改代码：

问题分析 #

原代码存在三处关键问题：

• 第一个面板的按钮外层div重复添加了data-bs-toggle="collapse"属性，导致事件触发异常
• 第一个面板按钮的aria-expanded属性值错误（应为true却写了false），不符合无障碍规范
• 原JS的索引判断逻辑容易出错，jQuery的index()方法在不同上下文下返回值不一致

修正后的完整代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="accordion accordion-flush" id="accordionFlush">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <!-- 移除外层div的data-bs-toggle属性，避免重复触发 -->
      <div class="pannel-heading" aria-expanded="true" aria-controls="collapseOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          SEO SHORT INFO SENTENCE 1
        </button>
      </div>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionFlush">
      <div class="accordion-body my-3">
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" class="hover-underline-animation">Enquire Now</a>
        </div>
      </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">
        SEO SHORT INFO SENTENCE 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionFlush">
      <div class="accordion-body">
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" class="btn btn-outline-dark btn-md mt-3">Enquire Now</a>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        SEO SHORT INFO SENTENCE 3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionFlush">
      <div class="accordion-body">
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" class="btn btn-outline-dark btn-md mt-3">Enquire Now</a>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript部分

$('[data-bs-toggle="collapse"]').on('click', function(e) {
  // 获取当前按钮对应的目标面板
  const targetPanel = $($(this).data('bs-target'));
  // 如果面板已经处于打开状态，阻止折叠行为
  if (targetPanel.hasClass('show')) {
    e.stopPropagation();
    e.preventDefault();
  }
});

逻辑说明 #

1. 移除重复触发属性：删除第一个面板外层div的data-bs-toggle="collapse"，避免同一面板的两个元素都触发折叠事件
2. 修正无障碍属性：将第一个面板按钮的aria-expanded设为true，与面板的show状态匹配
3. 简化判断逻辑：直接通过按钮的data-bs-target获取对应面板，判断是否已打开，若已打开则阻止默认的折叠操作；Bootstrap的data-bs-parent属性会自动处理切换其他面板时关闭旧面板的逻辑，无需额外编写。

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