この記事の例では、js で実装された非常に単純な展開と折りたたみのディレクトリ コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。
ここでは非常に単純なディレクトリを紹介します。メニューコードを展開し、マウスをクリックして展開し、もう一度クリックして折りたたむというツリーメニューの機能と似ています。インターネットでよく見たものですが、今後は紹介しません詳しく紹介していますので、ぜひ参考にしてください。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/
具体的なコードは次のとおりです:
<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>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。