修改tree.js代码实现单击文件夹名称即可展开对应文件夹

无需修改tree.js组件源码，直接在站点公共自定义脚本中添加事件委托即可实现目标效果，不需要定位源码内的双击事件绑定位置。

实现逻辑 #

通过事件委托监听文件夹名称的单击动作，直接触发组件原生绑定在前置箭头图标上的展开/折叠逻辑，完全复用组件原有能力，无侵入性，后续组件升级也不会产生冲突。

操作步骤 #

• 找到Hugo站点全局加载的自定义JS文件，加入如下代码：

document.addEventListener('DOMContentLoaded', () => {
  // 捕获阶段绑定点击事件，兼容动态渲染的树节点
  document.addEventListener('click', (e) => {
    // 匹配文件夹名称节点，排除箭头元素避免重复触发
    const folderTitle = e.target.closest('.tree-folder > .tree-node:not(.tree-arrow)');
    if (!folderTitle) return;

    // 触发对应文件夹箭头的原生点击事件，调用组件自带的展开逻辑
    const toggleBtn = folderTitle.parentElement.querySelector('.tree-arrow');
    if (toggleBtn) {
      toggleBtn.click();
      e.preventDefault();
      e.stopPropagation();
    }
  }, true);
});

• 如果当前使用的tree.js版本类名和上述代码不匹配，打开浏览器开发者工具检查文件夹节点、箭头对应的class名，替换代码中对应选择器即可，核心逻辑无需调整。
• 可选体验优化：在全局CSS中加入如下样式，给可点击的文件夹名称添加鼠标手型反馈，交互更统一：

.tree-folder > .tree-node:not(.tree-arrow) {
  cursor: pointer;
  user-select: none;
}

交互效果示意：

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