| ポイント |
<![CDATA[
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イベントを記述し展開する関数を呼び出します。 |
| サンプル |
<![CDATA[
<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!
|
クリックするとツリーメニューを表示する（リンクなし）