Javascript 应用程序脚本侧栏上的引导手风琴效果_Javascript_Twitter Bootstrap_Google Apps Script

Javascript 应用程序脚本侧栏上的引导手风琴效果

javascript twitter-bootstrap google-apps-script

Javascript 应用程序脚本侧栏上的引导手风琴效果,javascript,twitter-bootstrap,google-apps-script,Javascript,Twitter Bootstrap,Google Apps Script,我正在尝试在应用程序脚本的HTML侧栏中创建可折叠的内容。侧边栏将是工作表附加组件的一部分。我想创建一张类似于这张卡片的卡片当我创建这张卡片时，卡片看起来是正确的，但是当我点击标题时，什么也没有发生。此功能在应用程序脚本上不可用吗？如果是这样，我可能做错了什么应用程序脚本代码如下： <html> <head> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/boot

我正在尝试在应用程序脚本的HTML侧栏中创建可折叠的内容。侧边栏将是工作表附加组件的一部分。我想创建一张类似于这张卡片的卡片

当我创建这张卡片时，卡片看起来是正确的，但是当我点击标题时，什么也没有发生。此功能在应用程序脚本上不可用吗？如果是这样，我可能做错了什么

应用程序脚本代码如下：

<html>
  <head>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="accordion" id="accordionExample">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </button>
          </h5>
        </div>


    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        AAA pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>


可折叠组项目#1
AAA pariatur陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid。3狼月亮奥特餐厅，非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时，圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤从工艺啤酒场到餐桌，生料牛仔布美学合成物，你可能还没听说过accusamus labore可持续VHS。
可折叠组项目#2
动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅，非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时，圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤从工艺啤酒场到餐桌，生料牛仔布美学合成物，你可能还没听说过accusamus labore可持续VHS。
可折叠组项目#3
动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅，非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时，圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤从工艺啤酒场到餐桌，生料牛仔布美学合成物，你可能还没听说过accusamus labore可持续VHS。

谢谢@Sandy Good指出控制台

在引导之前需要先加载JQuery。

加载侧栏时，浏览器控制台中是否有错误消息？在Chrome/windows中，点击f12键以显示浏览器开发人员工具。是的，有一些错误消息：

util.js:56 Uncaught TypeError:无法读取未定义的

font awesome.min.css:4 Uncaught SyntaxError:无效或意外标记

Wn{message:“传输或处理过程中出错…此请求。错误代码=10，路径=/wardeninit”，名称：“TransportError”，堆栈：“TransportError:传输过程中出错…/js/2157460355-warden_bin_i18n_warden.js:181:252）”