js implémente des compétences d'expansion et de pliage de répertoire super simples code_javascript

L'exemple de cet article décrit le code de répertoire d'expansion et de pliage ultra-simple implémenté dans js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, nous introduisons un répertoire super simple, développons le code du menu, cliquez sur la souris pour développer, cliquez à nouveau pour réduire, similaire à la fonction du menu arborescent, je l'ai beaucoup vu sur Internet, je ne le ferai pas présentez-le en détail, n'hésitez pas à vous y référer.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.