 |
94
|
Re3:ツリーメニューで全展開のボタンをつけたい by ごだっち |
2004/08/06 (Fri) 22:35 |
|
|
admin
|
とりあえず作りかけだし、きっと無駄な再帰処理が含まれていると思うのだけれど、こんな感じで行けると思う。
閉じるほうは未だ作っていないので、リロードで試してみてください。
また、チェックボックスをオフにすると、最初の階層しか展開されません。
デフォルトのオン状態のときは、子がある限り再帰的に展開メニューを呼びにいくので、全部展開されます。
<html>
<head>
<style type="text/css">
<!--
body{
font-size:24px;
}
.M1{
margin-left:1em;
font-size:1.0em;
display:block;
}
.M2{
margin-left:3em;
font-size:0.8em;
display:none;
}
.M3{
margin-left:5em;
font-size:0.8em;
display:none;
}
.M4{
margin-left:7em;
font-size:0.8em;
display:none;
}
-->
</style>
<script type="text/javascript">
<!--
var oobj;
var flg;
function kept(obj){
flg = document.getElementById("extract").checked;
toplevel = obj.id.length;
// alert(toplevel);
ext(obj);
}
function ext(obj){
if(obj){
if(obj.style.display=="none"){
obj.style.display="block";
}
if(obj.childNodes){
pid = obj.id;
// alert("pid "+pid);
for(i=1;5>i;i++){
cid = pid + "-" + i;
cobj = document.getElementById(cid);
if(cobj){
// alert("cid "+cid);
cobj.style.display="block";
if(flg){
ext(cobj);
}
} else {
oid = obj.id;
len = oid.length -1;
pid = oid.substr(0,len);
opn = oid.substr(len,oid.length) -0;
opn = opn + 1;
npid = pid + opn;
// alert("npid "+ npid);
npobj = document.getElementById(npid);
if(npobj){
if(flg){
ext(npobj);
}
}
}
}
// alert("len " + obj.id.length);
if( obj.id.length > toplevel ){
onum = obj.id.substr(obj.id.length - 1,obj.id.length) - 0;
onum = onum + 1;
nid = obj.id.substr(0,obj.id.length - 1) + onum;
// alert("nid "+nid);
npobj = document.getElementById(nid);
if(npobj){
if(flg){
ext(npobj);
}
}
}
}
}
}
//-->
</script>
</head>
<body>
<input type="checkbox" id="extract" checked>
<div id="m1" class="M1" onclick="kept(this);">
Menu.1
<div id="m1-1" class="M2" style="display:none;">
Menu.1-1
<div id="m1-1-1" class="M3" style="display:none;">
Menu.1-1-1
<div id="m1-1-1-1" class="M4" style="display:none;">
Menu.1-1-1-1
</div>
<div id="m1-1-1-2" class="M4" style="display:none;">
Menu.1-1-1-2
</div>
</div>
<div id="m1-1-2" class="M3" style="display:none;">
Menu.1-1-2
<div id="m1-1-2-1" class="M4" style="display:none;">
Menu.1-1-2-1
</div>
<div id="m1-1-2-2" class="M4" style="display:none;">
Menu.1-1-2-2
</div>
</div>
<div id="m1-1-3" class="M3" style="display:none;">
Menu.1-1-3
<div id="m1-1-3-1" class="M4" style="display:none;">
Menu.1-1-3-1
</div>
</div>
<div id="m1-1-4" class="M3" style="display:none;">
Menu.1-1-4
<div id="m1-1-4-1" class="M4" style="display:none;">
Menu.1-1-4-1
</div>
<div id="m1-1-4-2" class="M4" style="display:none;">
Menu.1-1-4-2
</div>
<div id="m1-1-4-3" class="M4" style="display:none;">
Menu.1-1-4-3
</div>
</div>
</div>
<div id="m1-2" class="M2" style="display:none;">
Menu.1-2
<div id="m1-2-1" class="M3" style="display:none;">
Menu.1-2-1
</div>
<div id="m1-2-2" class="M3" style="display:none;">
Menu.1-2-2
</div>
</div>
</div>
<div id="m2" class="M1" onclick="kept(this);">
Menu.2
<div id="m2-1" class="M2" style="display:none;">
Menu.2-1
<div id="m2-1-1" class="M3" style="display:none;">
Menu.2-1-1
</div>
<div id="m2-1-2" class="M3" style="display:none;">
Menu.2-1-2
</div>
</div>
<div id="m2-2" class="M2" style="display:none;">
Menu.2-2
<div id="m2-2-1" class="M3" style="display:none;">
Menu.2-2-1
</div>
<div id="m2-2-2" class="M3" style="display:none;">
Menu.2-2-2
</div>
</div>
</div>
</body>
</html> |
|
 |
選択した記事にこのフォームで返信します。
|