如何通过JavaScript切换Bootstrap 5的accordion手风琴组件

Bootstrap 5 官方组件本身提供了原生JavaScript API，不需要依赖jQuery即可直接调用控制组件状态。

你只需要补全toggle函数的逻辑如下：

// 切换1号手风琴项的展开/收起状态
function toggle(event) {
  // 1. 获取你要控制的折叠面板DOM节点
  const collapseEl = document.getElementById('panelsStayOpen-collapseOne')
  // 2. 获取或创建对应面板的Bootstrap Collapse实例
  const collapseInstance = bootstrap.Collapse.getOrCreateInstance(collapseEl, {
    toggle: false // 禁止初始化时自动触发切换动作
  })
  // 3. 调用切换方法，也可替换为.show()直接展开、.hide()直接收起
  collapseInstance.toggle()
}

如果需要控制其他手风琴项，只要替换getElementById参数为对应折叠面板的ID即可。

以下是补全后的完整可运行代码：

<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <title>手风琴控制示例</title>
</head>

<body>

<button onclick="toggle(event)">切换1号手风琴项状态</button>

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        手风琴项1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>这是第一个手风琴项的内容区域。</strong> 默认处于展开状态，折叠组件会通过添加对应类名来控制元素的展示状态和过渡动画。你可以通过自定义CSS覆盖默认样式调整外观，也可以在<code>.accordion-body</code>容器内插入任意HTML内容，注意过渡动画会限制溢出内容的展示。
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script>
// 切换1号手风琴项的展开/收起状态
function toggle(event) {
  const collapseEl = document.getElementById('panelsStayOpen-collapseOne')
  const collapseInstance = bootstrap.Collapse.getOrCreateInstance(collapseEl, {
    toggle: false
  })
  collapseInstance.toggle()
}
</script>
</body>
</html>

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