如何用jQuery动态展开Bootstrap特定侧边栏手风琴菜单项？

核心Bootstrap类说明 #

Bootstrap 5手风琴的折叠/展开状态依赖以下关键类：

• collapse：标记内容区域为可折叠元素，默认处于折叠状态
• show：添加到collapse元素后，内容区域会展开
• collapsed：手风琴内部的触发按钮（.accordion-button）默认带这个类，表示折叠状态；展开时会自动移除该类

另外，Bootstrap的Collapse组件提供了内置JS方法，比直接操作类更可靠，能自动同步ARIA属性和按钮状态。

完整实现代码 #

HTML结构（手风琴+外部按钮）

<!-- 外部控制按钮 -->
<button onclick="myFunction1()">Button 1</button>
<button onclick="myFunction2()">Button 2</button>
<button onclick="myFunction3()">Button 3</button>

<!-- Bootstrap 5手风琴 -->
<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">
        这是第一项的内容
      </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">
        这是第二项的内容
      </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">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        这是第三项的内容
      </div>
    </div>
  </div>
</div>

jQuery实现代码

// 确保已引入jQuery和Bootstrap 5的JS文件
function myFunction1() {
  // 展开第一项，同时自动关闭其他项（依赖data-bs-parent属性）
  $('#collapseOne').collapse('show');
}

function myFunction2() {
  $('#collapseTwo').collapse('show');
}

function myFunction3() {
  $('#collapseThree').collapse('show');
}

关键说明 #

• 手风琴内容区域的data-bs-parent="#accordionExample"属性是实现“仅展开对应项”的核心，调用collapse('show')时会自动关闭其他已展开的面板。
• 如果不需要自动关闭其他项，移除内容区域的data-bs-parent属性即可，此时调用collapse('show')只会展开目标项，其他项保持当前状态。
• 不推荐直接手动操作类（如下示例），因为会跳过Bootstrap内置的状态同步逻辑，可能导致按钮状态和内容显示不一致：

  // 仅作示例，不推荐使用
  function myFunction1() {
    $('.accordion-collapse').removeClass('show');
    $('.accordion-button').addClass('collapsed');
    $('#collapseOne').addClass('show');
    $('#headingOne .accordion-button').removeClass('collapsed');
  }
  

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