使用JavaScript的可折叠列表

Question

我正试图在我的网站中实现this code。基本上，

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

2. 添加一个简单的列表到HTML文件：

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

3. ，并增加了一些样式的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; 
   } 
   

但是，代码不起作用。这似乎是因为我需要将函数“应用”给定的元素。由于页面状态：

的应用功能将与类“collapsibleList”任何列表到树视图，并收缩其子列表：

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

此功能一般应在页面加载后立即调用，使用诸如runOnLoad之类的代码。

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

这必须是一个微不足道的问题。正如你所猜测的，我几乎不知道JS。我只想添加一个很好的可折叠树，在打开和关闭时有不同的符号。 JS似乎是这里唯一的选择。

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

<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（）;}）;如果你正在使用jQuery

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

：

</script> 

Answer 1

您可以使用它代替

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