Question

我正在尝试将this code实施到我的网站中。基本上，

我下载了.js文件，添加到主文件夹，并将以下内容添加到HTML文件的头部：

在HTML文件中添加了一个简单的列表：

<ul class="collapsibleList">
<li>
Test 1
<ul>
<li>Yes</li>
</ul>
</li>
<li>
Test 2
<ul>
<li>No</li>
</ul>
</li>
</ul>

并在CSS中添加了一些样式，以便在树关闭/打开时显示加号/减号图标：

.collapsibleList li{
list-style-image: url(images/plus.svg);
cursor: auto;
}

li.collapsibleListOpen{
list-style-image: url(images/minus.svg);
cursor: pointer;
}

li.collapsibleListClosed{
list-style-image: url(images/plus.svg);
cursor: pointer;
}

然而，代码不起作用。这似乎是因为我需要将函数“应用”到给定元素。正如页面所述：

apply函数将任何带有'collapsibleList'类的列表转换为树视图并折叠其子列表：

1 // make the appropriate lists collapsible
2 CollapsibleLists.apply();

通常应在页面加载后立即调用此函数，使用runOnLoad等代码。

然后我迷路了。我检查了referred page，将RunOnLoad js添加到页面中，但仍然没有。

这一定是个微不足道的问题。你可以猜到，我几乎都不知道JS。我只是想添加一个漂亮的可折叠树，它在打开和关闭时有不同的符号。 JS似乎是这里唯一的选择。

更新：我转到了我从中获取代码的页面的源代码，因为作者显示了一个可折叠列表的示例。然后，我将他的代码实现到我的代码中。特别是，我在脑海中添加了以下内容：

<script>var runOnLoad=function(c,o,d,e){function x(){for(e=1;c.length;)c.shift()()}o[d]?(document[d]('DOMContentLoaded',x,0),o[d]('load',x,0)):o.attachEvent('onload',x);return function(t){e?o.setTimeout(t,0):c.push(t)}}([],window,'addEventListener');</script>
<script type="text/javascript">

这是我认为我失踪的那一点。然而，我不能让它发挥作用！ runOnLoad（function（）{CollapsibleLists.apply（）;}）;

</script>

Answer 1

您可以改用：

document.addEventListener("DOMContentLoaded", function(event) { 
    //your code to run since DOM is loaded and ready
    CollapsibleLists.apply();
});

如果你正在使用jQuery：

$(document).ready(function(){
 CollapsibleLists.apply();
})

Answer 2

这就是您应该使用代码的方式...

<script src="CollapsibleLists.js"></script>

<script>var runOnLoad=function(c,o,d,e){function x(){for(e=1;c.length;)c.shift()()}o[d]?(document[d]('DOMContentLoaded',x,0),o[d]('load',x,0)):o.attachEvent('onload',x);return function(t){e?o.setTimeout(t,0):c.push(t)}}([],window,'addEventListener');</script>
    
<script type="text/javascript">
      runOnLoad(function(){ CollapsibleLists.apply(); });
</script>

使用JavaScript

2 个答案: