使用CSS创建树状目录结构

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

示例代码


+ 主目录1


    子目录1.1
    子目录1.2



+ 主目录2


    子目录2.1
    子目录2.2

代码解析

定义主目录和子目录： 首先，我们需要定义两个`div`元素。一个用于主目录，命名为`main1`；另一个用于子目录，命名为`child1`。
添加点击事件： 在`main1`的`div`中，我们添加了一个`onclick`事件，调用了一个Javascript函数`toggleDisplay('child1')`。这个函数的作用是切换子目录的显示状态。
设置子目录初始状态： 在`child1`的`div`中，我们添加了一个CSS样式`display:none`，使其初始状态为隐藏。
子目录链接： 在`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找到对应的元素，并切换其显示状态。