我正在处理侧边栏中显示的大量信息，但在扩展 Accordion 时遇到问题。这些元素来自 MaterializeCSS.com
我使用以下命令来调用打开 html:
function sideBar2(){
var sideHtml = HtmlService.createTemplateFromFile('detailed-calculations').evaluate();
SpreadsheetApp.getUi().showSidebar(sideHtml);
}
这是我正在使用的 html 文件:
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection">
<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">
<script>
function formSubmit(user_input){
google.script.run.detailedCalc(user_input);
}
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, options);
});
function clps(){
$('.collapsible').collapsible();
}
</script>
</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 type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
我的光标发生变化，暗示有一个按钮，但是当我单击时，可折叠主体不会展开。我怀疑这可能与容器有关，但我对 html 不太有经验，无法诊断问题。我确实计划添加额外的文本，但想看看我是否可以先让它工作。
感谢任何帮助!!
最佳答案
两件商品 - 底部的 Materialize js 文件源链接显示:
<script type="text/javascript" src="js/materialize.min.js"></script>
您是否将其存储在元素中或在本地某处引用它？如果没有，请将该行切换为 MaterializeCSS 网站上推荐的内容:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
第二-
"var instances = M.Collapsible.init(elems, options)"
选项是一个参数。如果您不传递选项，那么您可以只使用空大括号，如下所示:
var instances = M.Collapsible.init(elems, {});
为了清楚起见，这里是 HTML 模板(删除了不相关的元素):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection">
<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">
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, {});
});
</script>
</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>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
关于javascript - Materialise CSS 中的可折叠元素未在 Apps 脚本侧边栏 HTML 中展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69032980/