關於顯示/隱藏的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以及。