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：コードの取得元のページのソースコードに移動しました。作成者が折りたたみ可能なリストの1つの例を示しているためです。そして、彼のコードを私の中に実装しました。特に、私は頭に以下を追加しました：

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