Materialize CSS可折叠元素在Apps Script侧边栏HTML中无法展开

修复核心点 #

• 原代码中本地相对路径的js/materialize.min.js、css/materialize.min.css在Google Apps Script侧边栏环境中无法加载，全部替换为公开CDN资源即可
• 折叠面板初始化代码中options变量未定义，导致初始化逻辑执行报错，无自定义配置时直接省略该参数即可
• 无需引入jQuery，Materialize 1.0+原生支持纯JS初始化组件，删除多余的jQuery风格初始化代码

修改后的完整HTML代码 #

<html>
  <head>
    <base target="_top">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">accessibility</i>Person</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">directions_boat</i>Boat</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">child_care</i>Baby</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">attach_money</i>Money</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    </ul>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
      function formSubmit(user_input){
        google.script.run.detailedCalc(user_input);
      }
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.collapsible');
        // 无自定义配置时省略options参数
        var instances = M.Collapsible.init(elems);
      });
      </script>
  </body>
</html>

自定义配置说明 #

如果需要调整折叠效果，可在初始化时添加配置参数，示例如下：

var instances = M.Collapsible.init(elems, {
  accordion: false, // 设为false可同时展开多个面板，默认true为手风琴模式
  activeIndex: 0 // 侧边栏打开时默认展开第一个面板
});

替换代码后重新运行sideBar2打开侧边栏即可正常使用折叠组件。

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