チェックを入れてくださいメニューが展開します。
サンプルソース
<HTML>
<HEAD>
<TITLE>ツリーメニュー チェックボックスにチェックを入れるとメニューが展開</TITLE>
<STYLE type="text/css">
<!--
a,label { cursor : pointer; }
label:hover { color : red; }
.Mymenu {
color : gray;
display:none;
margin-left : 5px;
line-height : 1.2;
}
-->
</STYLE>
<SCRIPT language=JavaScript>
<!--
var flag;
function Myshow(chkID,menuID){
if(document.getElementById(chkID).checked == true) //chkIDにチェックが入っていれば
{flag='block';} //block形式で表示
else{flag='none';} //表示しない
document.getElementById(menuID).style.display=flag;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<form>
<input type="checkbox" id="chkBox01" onclick="Myshow('chkBox01','menu01')"><label for="chkBox01">画像</label><br/>
<DIV class="Mymenu" id="menu01">
├ <A href="#">ドラッグして移動</A><br/>
├ <A href="#">フェードイン</A><br/>
├ <A href="#">ズームアップ</A><br/>
├ <A href="#">補足説明文</A><br/>
└ <A href="#">ロールオーバー</A><br/>
</DIV>
<input type="checkbox" id="chkBox02" onclick="Myshow('chkBox02','menu02')"><label for="chkBox02">ブログ カスタマイズ</label><br/>
<div class="Mymenu" id="menu02">
├ <A href="#">ファビコンの設置</A><br/>
└ <A href="#">背景画像の固定</A><br/>
</div></form>
</BODY>
</HTML>
チェックボックスのチェックの有無で displayプロパティの style.display=block;
style.display=none; で表示、非表示 を切り替えています。
displayプロパティ チェックボックスのラベル
