js implementiert supereinfache Erweiterungs- und Faltverzeichniscode_javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt den ultraeinfachen Erweiterungs- und Faltverzeichniscode, der in js implementiert ist. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier führen wir ein supereinfaches Verzeichnis ein, erweitern den Menücode, klicken mit der Maus, um es zu erweitern, klicken erneut, um es zu reduzieren, ähnlich der Funktion des Baummenüs. Ich habe es oft im Internet gesehen, werde es aber nicht tun Stellen Sie es im Detail vor, Sie können gerne darauf verweisen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/

Der spezifische Code lautet wie folgt:

<title>可折叠展开的简单目录</title>
<style>
div{
font-size:12px;
color:red;
background-color: #EAEAE8;
border: 1 solid #1892B5;
padding: 1
}
</style>
<div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')&#63;'':'none'" > 
+ 主目录1</div> 
<div id="child1" style="display:none"> 
<a href="#">- 子目录1</a> <br> 
<a href="#">- 子目录2</a> <br> 
<a href="#">- 子目录3</a> <br> 
<a href="#">- 子目录4</a> 
</div> 
<div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')&#63;'':'none'" > 
+ 主目录2 </div> 
<div id="child2" style="display:none"> 
<a href="#">- 子目录1</a> <br> 
<a href="#">- 子目录2</a> <br> 
<a href="#">- 子目录3</a> 
</div>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.