Zusammenklappbare Liste mit JavaScript

Question

Ich versuche this code in meine Website zu implementieren. Grundsätzlich

1. heruntergeladen ich die JS-Datei, hinzugefügt, um den Hauptordner und addierten die folgenden auf den Kopf der HTML-Datei:

2. Added eine triviale Liste der HTML-Datei:

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

3. und fügte etwas Styling auf die CSS, ein Plus/minus-Symbol zu haben, wenn der Baum/offen geschlossen ist:

   .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; 
   } 
   

Der Code funktioniert jedoch nicht. Dies scheint zu sein, weil ich die Funktion auf das gegebene Element "anwenden" muss. Da die Seite heißt es:

Die Funktion anwenden verwandelt jede Liste mit der Klasse ‚collapsibleList‘ in einer Baumansicht und bricht seine Unterlisten:

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

Diese Funktion sollte allgemein sein wird direkt nach dem Laden der Seite aufgerufen und verwendet einen Code wie runOnLoad.

Aber dann ging ich verloren. Ich überprüfte die referred page, fügte der RunOnLoad js der Seite auch hinzu, aber noch nichts.

Dies muss ein triviales Problem sein. Wie Sie sich vorstellen können, weiß ich fast nichts von JS. Ich möchte nur einen schönen zusammenklappbaren Baum hinzufügen, der verschiedene Symbole hat, wenn er geöffnet und geschlossen wird. JS scheint hier die einzige Wahl zu sein.

UPDATE: Ich ging zum Quellcode der Seite, von der ich den Code bekomme, weil der Autor ein Beispiel einer zusammenklappbaren Liste zeigt. Dann habe ich seinen Code in meinen implementiert. Insbesondere fügte ich Folgendes in meinen Kopf ein:

<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"> 

Das war das Bit, das ich dachte, dass ich fehlte. Aber ich kann es nicht schaffen! runOnLoad (function() {CollapsibleLists.apply();});

</script> 

Answer 1

Sie können dies stattdessen verwenden:

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

wenn Sie jQuery verwenden:

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