Vis.js Timeline嵌套组无法单独切换问题求助

看起来你遇到的核心问题是：默认的组折叠功能只处理组内条目，没自动隐藏嵌套子组，而且你想完全通过组标题的小三角单独控制每个组，禁用全局切换按钮。我来给你一套可行的解决方案，结合vis.js的API实现：

第一步：调整Timeline初始化配置 #

首先，禁用全局折叠/展开按钮，同时自定义组标题模板，确保小三角是可识别的点击元素：

var container = document.getElementById('timelinez');
var items = new vis.DataSet([/* 你的条目数据 */]);
var groups = new vis.DataSet([/* 你的组数据，记得给嵌套组添加parentId字段，示例：
  {id: 1, content: "父组1", parentId: null},
  {id: 2, content: "子组1-1", parentId: 1},
  {id: 3, content: "子组1-2", parentId: 1}
*/]);

var timelineOptions = {
  groups: {
    collapsible: true,
    // 自定义组标题模板，添加带类名的小三角
    template: (group) => `
      <div class="group-header">
        <span class="group-toggle-triangle">▼</span>
        <span class="group-title-text">${group.content}</span>
      </div>
    `
  },
  // 禁用全局工具栏的折叠/展开按钮
  toolbar: {
    collapseExpand: false
  }
};

var timeline = new vis.Timeline(container, items, groups, timelineOptions);

第二步：监听三角点击事件，手动控制组状态和嵌套组可见性 #

接下来，监听组的点击事件，只响应小三角的点击，同时处理嵌套组的显示/隐藏：

// 监听组点击事件
timeline.on('groupclick', (props) => {
  const target = props.event.target;
  // 只处理小三角的点击
  if (target.classList.contains('group-toggle-triangle')) {
    // 阻止默认的组点击行为，避免冲突
    props.event.stopPropagation();
    
    const groupId = props.group;
    const currentGroup = groups.get(groupId);
    
    // 切换当前组的折叠状态
    currentGroup.collapsed = !currentGroup.collapsed;
    groups.update(currentGroup);
    
    // 更新小三角的旋转状态
    target.style.transform = currentGroup.collapsed ? 'rotate(-90deg)' : 'rotate(0deg)';
    
    // 处理嵌套组：根据父组状态切换子组的可见性
    const nestedGroups = groups.get({
      filter: (group) => group.parentId === groupId
    });
    
    nestedGroups.forEach((nestedGroup) => {
      // 方案1：直接隐藏/显示子组（推荐）
      nestedGroup.hidden = currentGroup.collapsed;
      // 方案2：同步子组的折叠状态（可选，根据你的需求调整）
      // nestedGroup.collapsed = currentGroup.collapsed;
      groups.update(nestedGroup);
    });
  }
});

// 初始化时设置小三角的初始状态
document.querySelectorAll('.group-toggle-triangle').forEach((triangle) => {
  const groupElement = triangle.closest('.vis-group');
  const groupId = groupElement.getAttribute('data-group-id');
  const group = groups.get(groupId);
  if (group.collapsed) {
    triangle.style.transform = 'rotate(-90deg)';
  }
});

第三步：补充CSS优化视觉效果（可选） #

加一点CSS让小三角的切换更顺滑：

.group-toggle-triangle {
  display: inline-block;
  transition: transform 0.2s ease;
  cursor: pointer;
  margin-right: 8px;
}

.group-title-text {
  cursor: default;
}

关键说明 #

1. 嵌套组标识：确保你的组数据里有parentId字段，用来关联父组和子组，这样才能准确找到需要切换的嵌套组。
2. 阻止默认行为：必须调用stopPropagation()，否则vis.js的默认组点击逻辑会干扰自定义操作。
3. 状态同步：手动更新groups数据集的collapsed和hidden属性，Timeline会自动刷新视图。

如果你的vis.js版本较新，也可以检查是否有内置的嵌套组折叠配置，但根据经验，默认不会自动处理子组可见性，所以手动监听事件是最可靠的方案。

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