クリックするとツリーメニューを表示する(リンクなし)


動作ブラウザ 【 IE:4.0  NN:-
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × × × × × - × -
Macintosh × - - × × × × × - - ×
UNIX - - - - - - × × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; <span onClick="exMenu('treeMenu1')" style="cursor:pointer">■私の年齢は...</span><br> <div id="treeMenu1" style="display:none"> 20歳です。</div>
説  明 ツリーメニュー(Explorerのような階層表示型メニュー)はスタイルシートのdisplayプロパティを操作することで簡単に実現できます。表示しない場合はdisplayにnoneを、表示する場合はblockを設定します。複数の入れ子ツリーメニューにする場合はdivタグの中にdivタグを入れていきます。(入れ子/ネスト)  この時id名が同じにならないように気を付けてください。また、<a href="javaScript:exMenu('treeMenu1')">でtreeMenu1となっている部分のidが正しくdivタグで指定したidと対応するようにしてください。  ハイパーリンクを使わずにクリックされたらツリーメニューを表示させるにはspanタグ、divタグ内に直接onClickイベントを記述し展開する関数を呼び出します。
サンプル <html> <head> <title>クリックするとツリーメニューを表示する(リンクなし)</title> <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </head> <body bgcolor="white"> <br> <span onClick="exMenu('treeMenu1')" style="cursor:pointer">■私の年齢は...</span><br> <div id="treeMenu1" style="display:none"> 20歳です。</div> <span onClick="exMenu('treeMenu2')" style="cursor:pointer">■私の住所は...</span><br> <div id="treeMenu2" style="display:none"> 不定です。</div> <span onClick="exMenu('treeMenu3')" style="cursor:pointer">■私の性別は...</span><br> <div id="treeMenu3" style="display:none"> 男です。</div> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA