The example of this article tells the JS implementation of the Super simple expansion, folding directory code. Share to everyone for your reference. Specifically as follows:
Here introduces a super simple directory, expand menu code, mouse click can be expanded, click can be closed again, similar to the function of the tree menu, online saw a lot, do not introduce more, welcome reference.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/
The specific code is as follows:
<title> collapsible Simple catalog </title> <style> div{font-size:12px;
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 ')? ': ' None ' ' > + home directory 1</div> <div id= ' child1 ' style= ' Display: None "> <a href=" # ">-subdirectory 1</a> <br> <a href=" # ">-subdirectory 2</a> <br> <a href=" # " ;-Subdirectories 3</a> <br> <a href= "#" >-subdirectories 4</a> </div> <div id= "main2" style= "Color:blue" Oncl ick= "document.all.child2.style.display= (Document.all.child2.style.display = = ' None ')? ': ' None '" > + home Directory 2 </div > <div id= "child2" style= "Display:none" > <a href= "#" >-subdirectories 1</a> <br> <a href= "#" >-subdirectories 2</a> <br> <a href= "#" >-subdirectory 3</a> </div>
The
wants this article to help you with your JavaScript programming.