动态生成层级文件夹列表时误关父文件夹的问题

问题根源是事件冒泡：点击子文件夹区域时，事件会向上传递到父文件夹的点击事件处理函数，误触发父文件夹的折叠操作。以下是两种可靠的解决思路：

方案1：精准限定触发区域（推荐） #

把折叠/展开的触发逻辑只绑定到专门的按钮或图标上，而非整个文件夹条目，从根源避免误触。

1.1 PHP递归生成HTML（带触发按钮） #

function generateFolderTree($folders) {
    $html = '<ul class="folder-tree">';
    foreach ($folders as $folder) {
        $html .= '<li class="folder-item">';
        // 单独的折叠触发按钮，点击才会触发折叠
        $html .= '<span class="folder-toggle">📂</span>';
        $html .= '<span class="folder-name">' . htmlspecialchars($folder['name']) . '</span>';
        if (!empty($folder['children'])) {
            // 子文件夹默认折叠，添加hidden类
            $html .= '<ul class="sub-folders hidden">' . generateFolderTree($folder['children']) . '</ul>';
        }
        $html .= '</li>';
    }
    $html .= '</ul>';
    return $html;
}

1.2 CSS样式 #

.folder-tree {
    list-style: none;
    padding-left: 20px;
}
.folder-item {
    margin: 4px 0;
}
.folder-toggle {
    cursor: pointer;
    margin-right: 8px;
}
.folder-name {
    cursor: default; /* 点击文件夹名称不会触发任何操作 */
}
.sub-folders.hidden {
    display: none;
}

1.3 JavaScript逻辑（事件委托适配动态元素） #

// 用事件委托绑定到最外层父元素，兼容动态生成的文件夹
document.querySelector('.folder-tree').addEventListener('click', function(e) {
    // 仅当点击折叠按钮时执行逻辑
    if (e.target.classList.contains('folder-toggle')) {
        const subFolders = e.target.parentElement.querySelector('.sub-folders');
        if (subFolders) {
            // 切换子文件夹的显示/隐藏
            subFolders.classList.toggle('hidden');
            // 切换图标反馈状态
            e.target.textContent = subFolders.classList.contains('hidden') ? '📂' : '📁';
        }
    }
});

方案2：阻止事件冒泡 #

如果不想修改触发区域，可在子元素的点击事件中阻止事件向上传递，避免父元素的事件被误触发：

// 给所有子文件夹条目绑定阻止冒泡的事件
document.querySelectorAll('.sub-folders .folder-item').forEach(item => {
    item.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});

注意：如果是动态生成的子文件夹，需要在生成后重新执行这段绑定代码，或改用事件委托的方式处理。

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