PHP生成文件树：展开子节点时父节点折叠且页面滚动至顶部

嘿，我来帮你搞定这个文件树的问题！你遇到的两个小麻烦——展开子节点时父节点跟着折叠、页面自动滚到顶部，其实都是前端事件处理里的常见坑，咱们一步步来解决：

问题根源拆解 #

1. 页面自动滚顶：大概率是你用了 <a href="#"> 这类链接作为折叠触发按钮，点击时浏览器会默认执行锚点跳转行为，直接跳到页面顶部。
2. 父节点跟着折叠：这是事件冒泡导致的——点击子节点的触发按钮时，事件会向上传递到父节点的触发元素，触发了父节点的折叠逻辑。

修复后的jQuery代码 #

把这两个问题的解决逻辑整合到一起，替换你现有的代码试试：

$(document).ready(function() {
    // 给所有文件夹触发按钮绑定点击事件
    $('.folder-toggle').on('click', function(event) {
        // 1. 阻止浏览器默认的锚点跳转行为，解决滚顶问题
        event.preventDefault();
        // 2. 阻止事件向上冒泡，避免触发父节点的折叠逻辑
        event.stopPropagation();
        
        // 切换当前节点的子树显示/隐藏状态
        $(this).siblings('.sub-tree').toggle();
        // 可选：给按钮加状态样式（比如切换文件夹图标）
        $(this).toggleClass('folder-expanded folder-collapsed');
    });
});

对应PHP生成的HTML结构规范 #

确保你的PHP生成的文件树结构符合以下格式（核心是给触发元素和子节点容器加统一的类）：

<!-- PHP生成的文件树示例结构 -->
<ul class="file-tree">
    <li>
        <a href="#" class="folder-toggle folder-collapsed">项目根目录</a>
        <ul class="sub-tree" style="display: none;">
            <li>README.md</li>
            <li>
                <a href="#" class="folder-toggle folder-collapsed">src文件夹</a>
                <ul class="sub-tree" style="display: none;">
                    <li>index.php</li>
                    <li>utils.php</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

额外优化建议 #

• 可以给 .folder-expanded 和 .folder-collapsed 类加CSS图标样式，比如用不同的文件夹图标区分展开/折叠状态，提升用户体验。
• 如果你的文件树节点很多，建议用事件委托的方式绑定事件（比如绑定到最外层的 .file-tree），性能会更好：

  $('.file-tree').on('click', '.folder-toggle', function(event) {
      // 同样的阻止默认行为和冒泡逻辑
      event.preventDefault();
      event.stopPropagation();
      $(this).siblings('.sub-tree').toggle();
      $(this).toggleClass('folder-expanded folder-collapsed');
  });
  

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