CSS+JavaScript实现层级显示隐藏

/***************************by garcon1986********************************/

 

感谢CSDN的shan1119 帮我解决Javascript部分的错误。


<mce:script language="JavaScript"><!-- function toggle(id,id2,id3) { var state = document.getElementById(id).style.display; if (state == 'block') { document.getElementById(id).style.display = 'none'; if (id2 != undefined)document.getElementById(id2).style.display = 'none'; if (id3 != undefined)document.getElementById(id3).style.display = 'none'; } else { document.getElementById(id).style.display = 'block'; } } // --></mce:script> 

 

<mce:style type="text/css"><!-- #main{ position:relative; top:20px; left:20px; width:200px; background: lightblue; } #hidden { position:relative; top:0px; left:280px; width:200px; background: lightgrey; display: none; } #hidden2 { position:relative; top:-20px; left:580px; width:200px; background: lightgreen; display: none; } #hidden3 { position:relative; top:100px; left:0px; width:200px; background: lightpink; display: none; } --></mce:style><style type="text/css" mce_bogus="1">#main{ position:relative; top:20px; left:20px; width:200px; background: lightblue; } #hidden { position:relative; top:0px; left:280px; width:200px; background: lightgrey; display: none; } #hidden2 { position:relative; top:-20px; left:580px; width:200px; background: lightgreen; display: none; } #hidden3 { position:relative; top:100px; left:0px; width:200px; background: lightpink; display: none; }</style> <div id="main" onclick="toggle('hidden','hidden2','hidden3');"> 1 </div> <div id="hidden" onclick="toggle('hidden2','hidden3')"> 1.1 </div> <div id="hidden2"onclick="toggle('hidden3');"> 1.1.1 </div> <div id="hidden3"> 1.1.1.1 </div>

 

 

原帖：http://topic.csdn.net/u/20091215/05 /0e44fd89-74b3-4622-8ce7-3b3b8927db45.html