如何用原生JavaScript操作Bootstrap Accordion面板（无需jQuery）

问题1：纯原生JavaScript实现Accordion的展开与折叠 #

你原代码里的document.getElementById('sample-module').click()无效，核心原因是你点击的是面板容器而非Bootstrap绑定折叠逻辑的触发标签——Bootstrap 3的折叠交互是绑定在带有data-toggle="collapse"属性的<a>标签上的，而非外层的panel容器。

方案1：模拟触发标签的原生点击事件

直接修改按钮的onclick逻辑，定位到正确的触发标签后触发点击：

alert('Hello');
// 找到面板内的折叠触发链接
const toggleLink = document.querySelector('#sample-module .accordion-toggle');
// 触发原生点击事件实现状态切换
toggleLink.click();

方案2：直接操作Bootstrap折叠API（无需模拟点击）

如果不想依赖模拟点击，也可以直接通过原生JS调用Bootstrap的Collapse组件方法：

alert('Hello');
const collapseContent = document.getElementById('sample');
// 初始化组件（若未自动初始化）
const collapseInstance = new bootstrap.Collapse(collapseContent, { toggle: false });
// 切换状态：toggle()/show()/hide()
collapseInstance.toggle();

问题2：设置Accordion页面加载时的默认状态 #

Bootstrap 3的折叠面板默认状态由两个关键元素控制：

1. 折叠内容容器（#sample）的类：collapse in表示默认展开，仅collapse表示默认折叠
2. 触发标签（<a>）的aria-expanded属性：true对应展开状态，false对应折叠状态

设置默认展开

保持以下配置即可：

• 内容容器：<div id="sample" class="panel-collapse collapse in" aria-expanded="true">
• 触发标签：<a class="accordion-toggle" data-toggle="collapse" href="#sample" aria-expanded="true">

设置默认折叠

修改对应属性和类：

• 内容容器去掉in类：<div id="sample" class="panel-collapse collapse" aria-expanded="false">
• 触发标签的aria-expanded设为false：<a class="accordion-toggle" data-toggle="collapse" href="#sample" aria-expanded="false">

修改后的完整示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <button type="button" class="btn btn-info" onclick="
    alert('Hello');
    const toggleLink = document.querySelector('#sample-module .accordion-toggle');
    toggleLink.click();
  ">
    Toggle Accordian
  </button>
  <br /><br />
  <div class="row">
    <div class="col-xs-12">
      <div class="panel-group accordion">
        <div id="sample-module" class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle" data-toggle="collapse" href="#sample" aria-expanded="true">
                <i class="glyphicon glyphicon-chevron-down"></i>
                <strong>Sample Accordian</strong></a
              >
            </h4>
          </div>
          <!-- 默认展开状态：带in类，aria-expanded=true -->
          <div id="sample" class="panel-collapse collapse in" aria-expanded="true">
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-6">
                  <div class="form-group">
                    <label class="control-label" for="sample-field-1">
                      Sample Field 1:
                    </label>
                    <div class="controls">
                      <input id="sample-field-1" class="form-control" name="sample-field-1" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="form-group">
                    <label class="control-label" for="sample-field-2">
                      Sample Field 2:
                    </label>
                    <div class="controls">
                      <input id="sample-field-2" class="form-control" name="sample-field-2" type="text" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Điệp