ホームページ > ウェブフロントエンド > jsチュートリアル > js は非常に単純なディレクトリの展開と折りたたみを実装します。 code_javascript スキル

js は非常に単純なディレクトリの展開と折りたたみを実装します。 code_javascript スキル

WBOY
リリース: 2016-05-16 15:41:52
オリジナル
1718 人が閲覧しました

この記事の例では、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')&#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>
ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート