Question

我在css中实现了show / hide功能。但这不是我需要的。我想逐层展开内容，只需点击一下即可隐藏它们。现在我无法逐层扩展。

你可以帮帮我吗？非常感谢。：）

这是代码并经过测试：

<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。

关于show / hide的CSS问题

1 个答案: