没问题！我来帮你实现这两个需求——点击切换折叠/展开文件夹图标，同时添加加号/减号标识。下面是具体的分步方案，不管你是静态HTML还是PHP动态生成文件夹列表都适用：

1. 调整HTML/PHP结构 #

首先给每个文件夹项添加统一的结构，包含折叠/展开图标、加减号、文件夹名称和子内容容器。如果是PHP动态生成列表，直接在循环里输出即可：

静态HTML示例 #

<div class="folder-item">
  <!-- 折叠状态图标 -->
  <span class="toggle-icon">📁</span>
  <!-- 初始加号 -->
  <span class="plus-minus">+</span>
  <span class="folder-name">我的文档</span>
  <!-- 子内容默认隐藏 -->
  <div class="folder-content" style="display: none;">
    <div class="folder-item">
      <span class="toggle-icon">📁</span>
      <span class="plus-minus">+</span>
      <span class="folder-name">工作文件</span>
    </div>
  </div>
</div>

PHP动态生成示例 #

<?php
// 假设$folders是从数据库/文件系统获取的文件夹数据
$folders = [
    ['name' => '项目A', 'children' => ['需求文档', '源码']],
    ['name' => '项目B', 'children' => []]
];

foreach ($folders as $folder) {
?>
<div class="folder-item">
  <span class="toggle-icon">📁</span>
  <span class="plus-minus">+</span>
  <span class="folder-name"><?= htmlspecialchars($folder['name']) ?></span>
  <div class="folder-content" style="display: none;">
    <?php foreach ($folder['children'] as $child) { ?>
      <div class="folder-item">
        <span class="toggle-icon">📁</span>
        <span class="plus-minus">+</span>
        <span class="folder-name"><?= htmlspecialchars($child) ?></span>
      </div>
    <?php } ?>
  </div>
</div>
<?php
}
?>

2. 基础CSS样式（可选但推荐） #

添加一点样式让元素对齐更美观，提升交互体验：

.folder-item {
  cursor: pointer;
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 6px; /* 图标、加减号、名称之间的间距 */
}

.folder-content {
  margin-left: 22px; /* 子内容缩进，层级更清晰 */
}

.plus-minus {
  font-weight: bold;
  color: #333;
}

3. JavaScript交互逻辑 #

通过JS监听点击事件，切换图标、加减号文本，同时控制子内容的显示/隐藏。这里分两种图标场景：

场景1：纯文本/emoji图标 #

直接切换文本内容即可：

// 获取所有文件夹项
const folderItems = document.querySelectorAll('.folder-item');

folderItems.forEach(item => {
  item.addEventListener('click', function() {
    const toggleIcon = this.querySelector('.toggle-icon');
    const plusMinus = this.querySelector('.plus-minus');
    const folderContent = this.querySelector('.folder-content');

    // 切换状态：折叠 → 展开
    if (toggleIcon.textContent === '📁') {
      toggleIcon.textContent = '📂'; // 展开图标
      plusMinus.textContent = '-';
      folderContent.style.display = 'block';
    } else {
      toggleIcon.textContent = '📁'; // 折叠图标
      plusMinus.textContent = '+';
      folderContent.style.display = 'none';
    }
  });
});

场景2：图标字体（如Font Awesome） #

如果你用的是图标库（比如Font Awesome），切换类名即可：

<!-- 替换原来的图标为Font Awesome类 -->
<span class="toggle-icon fa fa-folder"></span>

folderItems.forEach(item => {
  item.addEventListener('click', function() {
    const toggleIcon = this.querySelector('.toggle-icon');
    const plusMinus = this.querySelector('.plus-minus');
    const folderContent = this.querySelector('.folder-content');

    // 切换图标类
    toggleIcon.classList.toggle('fa-folder');
    toggleIcon.classList.toggle('fa-folder-open');
    
    // 切换加减号
    plusMinus.textContent = plusMinus.textContent === '+' ? '-' : '+';
    
    // 切换子内容显示
    folderContent.style.display = folderContent.style.display === 'none' ? 'block' : 'none';
  });
});

效果说明 #

点击任意文件夹项时：

• 折叠状态的📁会变成展开状态的📂（或图标库对应的展开图标）
• 左侧的+会切换为-，再次点击又会切回+
• 子文件夹/内容会同步展开或隐藏

内容的提问来源于stack exchange，提问作者Kalysto