当前位置：首页 > JavaScript

js实现文件夹效果

2026-01-31 09:10:51JavaScript

实现文件夹效果的方法

在JavaScript中实现文件夹效果通常涉及模拟文件系统的层级结构，包括文件夹的展开、折叠、拖放等功能。以下是几种常见的实现方式：

使用HTML和CSS构建基础结构

通过嵌套的<ul>和<li>元素模拟文件夹层级结构，配合CSS实现展开/折叠效果：

js实现文件夹效果

<div id="folder-structure">
  <ul>
    <li class="folder">Documents
      <ul>
        <li class="file">report.pdf</li>
      </ul>
    </li>
  </ul>
</div>

.folder::before {
  content: "📁";
  margin-right: 5px;
}
.file::before {
  content: "📄";
  margin-right: 5px;
}
ul {
  list-style: none;
  padding-left: 20px;
}

使用JavaScript添加交互功能

通过事件监听实现文件夹的展开/折叠功能：

js实现文件夹效果

document.querySelectorAll('.folder').forEach(folder => {
  folder.addEventListener('click', function(e) {
    if (e.target === this) {
      const subList = this.querySelector('ul');
      if (subList) {
        subList.style.display = subList.style.display === 'none' ? 'block' : 'none';
        this.classList.toggle('collapsed');
      }
    }
  });
});

使用现成的库简化开发

可以考虑使用以下成熟的库来实现更复杂的功能：

jsTree：提供完整的树形结构展示功能
FancyTree：支持懒加载、复选框、拖放等高级功能
D3.js：适合需要高度自定义的可视化场景

实现拖放功能

使用HTML5 Drag and Drop API实现文件夹和文件的拖放：

document.querySelectorAll('.folder, .file').forEach(item => {
  item.setAttribute('draggable', true);

  item.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', this.innerText);
  });

  item.addEventListener('dragover', function(e) {
    e.preventDefault();
  });

  item.addEventListener('drop', function(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    // 处理拖放逻辑
  });
});

完整示例代码

class FileSystem {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.initEvents();
  }

  initEvents() {
    this.container.addEventListener('click', (e) => {
      if (e.target.classList.contains('folder')) {
        this.toggleFolder(e.target);
      }
    });
  }

  toggleFolder(folder) {
    const subList = folder.querySelector('ul');
    if (subList) {
      subList.style.display = subList.style.display === 'none' ? 'block' : 'none';
      folder.classList.toggle('collapsed');
    }
  }

  render(data) {
    this.container.innerHTML = this.generateHTML(data);
  }

  generateHTML(items) {
    return `<ul>${items.map(item => {
      if (item.type === 'folder') {
        return `<li class="folder">${item.name}${this.generateHTML(item.children)}</li>`;
      } else {
        return `<li class="file">${item.name}</li>`;
      }
    }).join('')}</ul>`;
  }
}