当前位置：首页 > JavaScript

js实现文件夹效果

2026-03-02 00:22:50JavaScript

实现文件夹效果的核心思路

使用HTML和CSS创建文件夹的视觉结构，配合JavaScript实现交互逻辑（如展开/折叠、拖拽等）。关键点在于DOM操作和样式控制。

基础HTML结构

<div class="folder">
  <div class="folder-header" onclick="toggleFolder(this)">
    <span class="folder-icon">📁</span>
    <span class="folder-name">Documents</span>
  </div>
  <div class="folder-content">
    <div class="file">file1.txt</div>
    <div class="file">file2.jpg</div>
  </div>
</div>

CSS样式设计

.folder {
  width: 200px;
  border: 1px solid #ddd;
  margin: 5px;
}

.folder-header {
  padding: 8px;
  background: #f5f5f5;
  cursor: pointer;
}

.folder-content {
  padding: 5px;
  display: none; /* 默认折叠 */
}

.file {
  padding: 3px 0 3px 20px;
}

.folder.expanded .folder-content {
  display: block; /* 展开时显示 */
}

JavaScript交互逻辑

function toggleFolder(element) {
  const folder = element.parentElement;
  folder.classList.toggle('expanded');
}

// 动态创建文件夹
function createFolder(name) {
  const folder = document.createElement('div');
  folder.className = 'folder';
  folder.innerHTML = `
    <div class="folder-header">
      <span class="folder-icon">📁</span>
      <span class="folder-name">${name}</span>
    </div>
    <div class="folder-content"></div>
  `;
  return folder;
}

高级功能实现

拖放文件到文件夹

document.querySelectorAll('.folder-content').forEach(content => {
  content.addEventListener('dragover', e => {
    e.preventDefault();
    content.style.backgroundColor = '#e3f2fd';
  });

  content.addEventListener('drop', e => {
    e.preventDefault();
    const fileId = e.dataTransfer.getData('text/plain');
    const file = document.getElementById(fileId);
    content.appendChild(file);
    content.style.backgroundColor = '';
  });
});

右键菜单支持

document.addEventListener('contextmenu', e => {
  if (e.target.closest('.folder')) {
    e.preventDefault();
    showFolderMenu(e.clientX, e.clientY);
  }
});

function showFolderMenu(x, y) {
  const menu = document.getElementById('folder-context-menu');
  menu.style.display = 'block';
  menu.style.left = `${x}px`;
  menu.style.top = `${y}px`;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .folder { width: 200px; border: 1px solid #ddd; margin: 5px; }
    .folder-header { padding: 8px; background: #f5f5f5; cursor: pointer; }
    .folder-content { padding: 5px; display: none; }
    .file { padding: 3px 0 3px 20px; border-bottom: 1px dotted #ccc; }
    .folder.expanded .folder-content { display: block; }
    #folder-context-menu {
      position: absolute; 
      display: none;
      background: white;
      border: 1px solid #999;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div id="folder-context-menu">
    <div>New Folder</div>
    <div>Rename</div>
    <div>Delete</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const container = document.getElementById('container');
      const folders = ['Documents', 'Images', 'Projects'];

      folders.forEach(name => {
        const folder = createFolder(name);
        container.appendChild(folder);

        // 添加示例文件
        const content = folder.querySelector('.folder-content');
        for (let i = 1; i <= 3; i++) {
          const file = document.createElement('div');
          file.className = 'file';
          file.textContent = `${name.toLowerCase()}_file${i}.txt`;
          file.draggable = true;
          file.id = `file-${Math.random().toString(36).substr(2, 9)}`;
          file.addEventListener('dragstart', e => {
            e.dataTransfer.setData('text/plain', e.target.id);
          });
          content.appendChild(file);
        }
      });
    });

    function toggleFolder(element) {
      element.parentElement.classList.toggle('expanded');
    }

    function createFolder(name) {
      const folder = document.createElement('div');
      folder.className = 'folder';
      folder.innerHTML = `
        <div class="folder-header" onclick="toggleFolder(this)">
          <span class="folder-icon">📁</span>
          <span class="folder-name">${name}</span>
        </div>
        <div class="folder-content"></div>
      `;
      return folder;
    }
  </script>
</body>
</html>

性能优化建议

对于大型文件系统，建议使用虚拟滚动技术，只渲染可视区域内的文件夹和文件。可以使用第三方库如react-window或vue-virtual-scroller实现。

树形结构数据处理可以考虑使用如下格式：

js实现文件夹效果

const treeData = {
  name: "Root",
  children: [
    {
      name: "Folder1",
      type: "folder",
      children: [
        { name: "file1.txt", type: "file" }
      ]
    }
  ]
}

通过递归渲染可以实现无限层级的文件夹结构。