使用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(); 
})