TreantJS中含innerHTML的节点折叠动画失效问题求助

我之前也碰到过TreantJS的这个小坑——用text属性的节点折叠动画正常，但自定义innerHTML的节点要么初始展开没法折叠，要么折叠功能直接失效。核心原因是TreantJS的折叠交互默认依赖内置的触发元素和节点状态识别逻辑，自定义innerHTML时很容易破坏这些机制，下面给你几个可行的解决方案：

1. 保留默认的折叠触发元素 #

TreantJS的折叠功能靠节点内的.plus（展开按钮）和.minus（折叠按钮）元素触发，如果你完全自定义innerHTML覆盖了这些元素，自然没法触发折叠。所以在自定义内容时，要手动把这些触发元素加回去：

比如修改你的节点配置，用动态innerHTML保留触发按钮：

var simple_chart_config = {
  chart: {
    container: "#tree-sample",
    animateOnInit: true,
    node: {
      collapsable: true,
      // 自定义innerHTML时包含折叠触发按钮
      innerHTML: function(nodeData) {
        // 根据节点折叠状态显示对应按钮
        var toggleClass = nodeData.collapsed ? 'plus' : 'minus';
        return `<span class="${toggleClass}"></span><div class="custom-content">${nodeData.customText}</div>`;
      }
    },
    connectors: {
      type: "step",
      style: { "stroke-width": 2 }
    },
    animation: {
      nodeAnimation: "linear",
      nodeSpeed: 700 // 补全你的动画配置
    }
  },
  nodeStructure: {
    text: "根节点",
    children: [
      {
        customText: "用innerHTML的节点1",
        collapsed: true, // 明确设置初始折叠状态
        children: [{ text: "子节点1-1" }]
      },
      {
        text: "用text的节点2", // 这个节点折叠正常
        children: [{ text: "子节点2-1" }]
      }
    ]
  }
};

2. 明确设置节点的初始折叠状态 #

使用innerHTML时，TreantJS有时无法自动识别collapsed属性，所以必须在每个需要初始折叠的节点配置里显式声明collapsed: true，确保初始化时节点处于折叠状态。

3. 手动绑定折叠事件（自定义按钮场景） #

如果你不想用TreantJS默认的.plus/.minus按钮，想完全自定义折叠触发元素，可以在图表初始化完成后，手动给自定义按钮绑定点击事件，调用TreantJS的toggle()方法：

// 初始化图表
var myChart = new Treant(simple_chart_config);

// 给自定义折叠按钮绑定事件
document.querySelectorAll('.custom-toggle-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取对应节点的ID（可以通过自定义属性存储）
    var nodeId = this.getAttribute('data-node-id');
    // 调用节点的toggle方法触发折叠/展开
    myChart.tree.nodes[nodeId].toggle();
  });
});

注意事项 #

• 不要覆盖TreantJS默认的.treant-node、.plus、.minus等类的核心样式，否则可能影响交互逻辑；
• 如果自定义了节点的HTML结构，确保触发元素在节点容器内，TreantJS才能正确识别交互区域。

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