当前位置：首页 > JavaScript

js实现文件夹效果

2026-04-05 01:12:07JavaScript

使用HTML和CSS创建文件夹结构

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

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

<style>
.folder { cursor: pointer; position: relative; }
.folder::before { content: '📁 '; }
.folder.collapsed::before { content: '📂 '; }
.file::before { content: '📄 '; }
ul { padding-left: 20px; list-style: none; }
.collapsed > ul { display: none; }
</style>

<script>
document.querySelectorAll('.folder').forEach(folder => {
  folder.addEventListener('click', (e) => {
    e.stopPropagation();
    folder.classList.toggle('collapsed');
  });
});
</script>

使用第三方库实现高级效果

对于更复杂的需求，可以考虑使用以下JavaScript库：

jsTree：提供完整的树形结构功能

js实现文件夹效果

$('#container').jstree({
'core' : {
 'data' : [
   { "text" : "Root", "children" : [
     { "text" : "Folder 1" },
     { "text" : "Folder 2" }
   ]}
 ]
}
});

FancyTree：支持懒加载和多种交互方式

$("#tree").fancytree({
source: [
 {title: "Documents", folder: true, children: [
   {title: "Project1", folder: true},
   {title: "Project2", folder: true}
 ]}
]
});

文件系统API交互

使用浏览器File System Access API实现真实文件操作：

js实现文件夹效果

async function openFolder() {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.kind === 'directory' ? '📁' : '📄', entry.name);
  }
}

虚拟文件系统实现

创建内存中的虚拟文件系统：

class VirtualFileSystem {
  constructor() {
    this.fs = { '/': { type: 'dir', children: {} } };
  }

  mkdir(path) {
    const parts = path.split('/').filter(Boolean);
    let current = this.fs['/'];
    parts.forEach(part => {
      if (!current.children[part]) {
        current.children[part] = { type: 'dir', children: {} };
      }
      current = current.children[part];
    });
  }
}

const vfs = new VirtualFileSystem();
vfs.mkdir('/documents/projects');

可视化拖放功能

实现文件夹和文件的拖放排序：

document.addEventListener('DOMContentLoaded', () => {
  const folders = document.querySelectorAll('.folder');
  folders.forEach(folder => {
    folder.draggable = true;
    folder.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', folder.textContent);
    });
    folder.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.target.classList.add('drag-over');
    });
    folder.addEventListener('drop', (e) => {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      console.log(`Dropped ${data} into ${e.target.textContent}`);
    });
  });
});