The example in this article describes the ultra-simple expansion and folding directory code implemented in js. Share it with everyone for your reference. The details are as follows:
Here we introduce a super simple directory, expand the menu code, click the mouse to expand, click again to collapse, similar to the function of the tree menu, I have seen it a lot on the Internet, I won’t introduce it in detail, welcome to refer to it.
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>可折叠展开的简单目录</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')?'':'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')?'':'none'" > + 主目录2 </div> <div id="child2" style="display:none"> <a href="#">- 子目录1</a> <br> <a href="#">- 子目录2</a> <br> <a href="#">- 子目录3</a> </div>
I hope this article will be helpful to everyone’s JavaScript programming design.