关于显示/隐藏的CSS问题

Question

我已经实现了CSS中的显示/隐藏功能。但这不是我需要的。我想要逐层展开内容并将其全部隐藏起来。现在我无法逐层展开。

你能帮我吗？非常感谢。 :)

这里是代码，它的测试：

<script language="JavaScript"> 
    function toggle(id) { 
     var state = document.getElementById(id).style.display; 
      if (state == 'block') { 
       document.getElementById(id).style.display = 'none'; 
      } else { 
       document.getElementById(id).style.display = 'block'; 
      } 
     } 
</script> 
<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; 
} 
</style> 

<div id="main" onclick="toggle('hidden');toggle('hidden2');toggle('hidden3');"> 
1 
</div> 

<div id="hidden" onclick="toggle('hidden2');toggle('hidden3');"> 
1.1 
</div> 

<div id="hidden2"onclick="toggle('hidden3');"> 
1.1.1 
</div> 

<div id="hidden3"> 
1.1.1.1 
</div> 

Answer 1

你有没有考虑使用插件从如jQuery，Mootools和ExtJS的框架，而不是试图推倒重来？

看起来好像你想要一个treeviewer。

顺便说一句，你正在使用JavaScript，它不仅仅是CSS ...请标记JavaScript以及。