JavaScript实现的经典文件树菜单效果

以下是“JavaScript实现的经典文件树菜单效果”的完整攻略：

一、实现原理

这个经典的文件树菜单效果，其实就是一个树形结构，其中每一个节点都是一个文件夹或文件。当我们点击文件夹时，它的子节点就会展开，当我们再次点击时，它的子节点就会收起。而文件则没有子节点，所以点击文件时不会做出任何反应。

在实现这个效果时，我们可以用ul和li标签以及CSS来创建这个树形结构。接着，我们可以使用JavaScript，给每个文件夹节点添加一个点击事件响应函数，用于展开或收起其子节点。

二、实现步骤

1. HTML结构

首先，我们需要使用ul和li标签创建一个基本的树形结构。具体代码如下：

<ul id="fileTree">
    <li>
        <span class="folder">文件夹1</span>
        <ul>
            <li class="file">文件1</li>
            <li class="file">文件2</li>
        </ul>
    </li>
    <li>
        <span class="folder">文件夹2</span>
        <ul>
            <li class="file">文件3</li>
        </ul>
    </li>
</ul>

2. CSS样式

接着，我们需要为这个树形结构添加一些CSS样式，使其看起来更加美观。具体代码如下：

#fileTree {
    list-style: none;
    padding-left: 20px;
}
#fileTree .folder {
    color: #0066CC;
    cursor: pointer;
}
#fileTree .folder:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
#fileTree .active:before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
#fileTree .file {
    color: #333;
    cursor: default;
}

3. JavaScript实现

最后，我们需要使用JavaScript来实现文件树菜单的效果。具体代码如下：

var tree = document.getElementById("fileTree");
var folders = tree.getElementsByClassName("folder");
for (var i = 0; i < folders.length; i++) {
    folders[i].addEventListener("click", function () {
        var parent = this.parentNode;
        if (parent.classList.contains("active")) {
            parent.classList.remove("active");
        } else {
            parent.classList.add("active");
        }
    });
}

通过上述代码，我们给每个文件夹节点添加了一个点击事件响应函数，用来展开或收起其子节点。其中，我们使用了classList属性来添加或删除active类，用以实现文件夹节点的展开或收起。

三、示例说明

示例一

在代码中，我们可以通过修改CSS样式的方式，来美化文件树菜单的样式。例如，我们可以修改文件夹节点的颜色、字体大小、背景色等属性，来让它们更加美观。

示例二

我们还可以通过修改JavaScript代码的方式，来扩展文件树菜单的功能。例如，我们可以添加一个搜索框，用来搜索文件树中的文件。具体实现方法可以参考下面这个示例代码：

var searchInput = document.getElementById("searchInput");
searchInput.addEventListener("input", function () {
    var keyword = searchInput.value;
    var files = tree.getElementsByClassName("file");
    for (var i = 0; i < files.length; i++) {
        if (keyword == "" || files[i].innerHTML.indexOf(keyword) >= 0) {
            files[i].style.display = "block";
        } else {
            files[i].style.display = "none";
        }
    }
});

在上面的代码中，我们给输入框添加了一个input事件响应函数，在每次输入时，根据输入框中的关键词，动态地显示或隐藏文件节点。这样，用户就可以快速地找到自己想要的文件了。