Apps Script侧边栏Bootstrap折叠面板点击无响应问题排查

当然可行啦！我之前踩过类似的坑，你的折叠功能没反应大概率是这几个细节没处理好，咱们一步步排查：

1. 缺失Bootstrap依赖的核心库 #

Bootstrap 4的折叠组件依赖jQuery和Popper.js，如果只引入Bootstrap JS，点击事件根本触发不了。你得按顺序引入这三个文件：

<head>
  <!-- 先引入jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 再引入Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <!-- 最后引入Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <!-- 别忘了引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>

2. HTML折叠结构不符合Bootstrap规范 #

折叠组件需要严格对应data-toggle、data-target和折叠内容的ID匹配，举个正确的示例：

<div class="card">
  <div class="card-header" id="headingOne">
    <h5 class="mb-0">
      <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        点击展开/折叠这个卡片
      </button>
    </h5>
  </div>

  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
    <div class="card-body">
      这里是折叠后显示的内容~
    </div>
  </div>
</div>

重点注意：

• data-target的值要和折叠内容的id完全一致（带#号）
• 如果是手风琴式折叠，要给父容器加id，并在折叠内容里加data-parent="#父容器ID"

3. Apps Script的HtmlService加载问题 #

确保你在GS代码里正确加载HTML文件，比如：

function showSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('Sidebar')
    .setTitle('我的折叠侧边栏')
    .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

新版Apps Script的沙箱模式默认是EMULATED，不需要额外设置，但如果你的脚本有特殊需求，也可以手动设置宽松模式：

.setSandboxMode(HtmlService.SandboxMode.IFRAME)

4. 脚本执行时机问题 #

如果你的折叠内容是动态生成的，或者脚本在DOM加载前执行，会导致事件绑定失败。可以把脚本放在body末尾，或者用DOM加载完成事件包裹：

<script>
  $(document).ready(function() {
    // 这里可以写自定义的折叠逻辑（如果需要的话）
  });
</script>

把这些点都检查一遍，应该就能解决点击没反应的问题啦！

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