使用CSS创建树状目录结构

本文将详细介绍如何使用CSS和Javascript创建树状目录结构。我们首先展示示例代码，然后逐步解析每个部分的功能。

示例代码

+ 主目录1


    子目录1.1
    子目录1.2



+ 主目录2


    子目录2.1
    子目录2.2

代码解析

1. 定义主目录和子目录： 首先，我们需要定义两个`div`元素。一个用于主目录，命名为`main1`；另一个用于子目录，命名为`child1`。
2. 添加点击事件： 在`main1`的`div`中，我们添加了一个`onclick`事件，调用了一个Javascript函数`toggleDisplay('child1')`。这个函数的作用是切换子目录的显示状态。
3. 设置子目录初始状态： 在`child1`的`div`中，我们添加了一个CSS样式`display:none`，使其初始状态为隐藏。
4. 子目录链接： 在`child1`的`div`中，我们可以添加多个子目录项，并将其设置为超级链接。示例中使用了空链接`#`，实际应用中应替换为实际链接。

Javascript函数

function toggleDisplay(id) {
    var element = document.getElementById(id);
    if (element.style.display === 'none') {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}

这个函数接收一个ID参数，根据该ID找到对应的元素，并切换其显示状态。

其他目录的制作

其他目录的制作只需重复上述步骤即可。每个主目录和子目录都遵循相同的模式。

CSS属性`display`与`visibility`的区别

`display`属性在隐藏元素后会释放该元素占用的空间，而`visibility`属性则不会。因此，`display`属性更适合用于制作树状目录，因为它可以使页面布局更加紧凑。