HTML实现树形目录

zywan

要用CSS和JavaScript创建一个树形目录，可以按照以下步骤进行。这个树形目录将支持展开和折叠功能。

HTML 结构

首先，创建一个基本的HTML结构来表示树形目录。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Directory</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul id="tree">
        <li>
            <span class="folder">Folder 1</span>
            <ul>
                <li><span class="file">File 1.1</span></li>
                <li><span class="file">File 1.2</span></li>
                <li>
                    <span class="folder">Subfolder 1.3</span>
                    <ul>
                        <li><span class="file">File 1.3.1</span></li>
                        <li><span class="file">File 1.3.2</span></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span class="folder">Folder 2</span>
            <ul>
                <li><span class="file">File 2.1</span></li>
                <li><span class="file">File 2.2</span></li>
            </ul>
        </li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

接下来，添加一些CSS样式来美化树形目录，并添加展开/折叠的图标。

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

ul {
    list-style-type: none;
    padding-left: 20px;
}

li {
    margin: 5px 0;
}

.folder, .file {
    cursor: pointer;
}

.folder::before {
    content: "📁 ";
}

.file::before {
    content: "📄 ";
}

.folder.collapsed::before {
    content: "📂 ";
}

.folder.collapsed + ul {
    display: none;
}

JavaScript 功能

最后，使用JavaScript来实现展开和折叠功能。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const tree = document.getElementById('tree');

    tree.addEventListener('click', function(event) {
        if (event.target.classList.contains('folder')) {
            event.target.classList.toggle('collapsed');
        }
    });
});

解释

  • HTML：使用嵌套的<ul>和<li>元素来表示树形结构。每个文件夹和文件都用<span>标签包裹，并分别添加folder和file类。
  • CSS：
    • 使用::before伪元素来添加文件夹和文件的图标。
    • 当文件夹被折叠时，添加collapsed类，并隐藏其子元素。
  • JavaScript：
    • 监听树形目录的点击事件。
    • 如果点击的是文件夹，则切换collapsed类，从而展开或折叠该文件夹。

运行效果

打开HTML文件后，你将看到一个树形目录。点击文件夹图标可以展开或折叠其内容。

希望这个示例对你有帮助！如果有任何问题，请随时提问。