Javascript Vis.js Timeline无法切换嵌套组

我不想用按钮切换所有组。我只想用组标题左侧的小三角形按钮一次切换单个组

当前，我可以单击按钮，三角形旋转90度，但嵌套组仍然可见

我在GitHub上看到过这个问题和类似的问题，但还没有什么能让我达到目的

下面是我如何配置时间线

var container = document.getElementById('timelinez');
var items = new vis.DataSet();
var visibleData;

// Configure groups
//var groupLabelHTML = '<p style="margin:0px;padding:0px;">'+name+'<br><a href='+URL+'><img style="height:14px" src='+arrowURL+'></a></p>';
var groups = [
    {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
    {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
    {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
    {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
    {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
    {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
    {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
    {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

    {id: 'x1_APs',content: 'APs'},
    {id: 'x2_APs',content: 'APs'},
    {id: 'x3_APs',content: 'APs'},
    {id: 'x4_APs',content: 'APs'},
    {id: 'x5_APs',content: 'APs'},
    {id: 'x6_APs',content: 'APs'},
    {id: 'x7_APs',content: 'APs'},
    {id: 'x8_APs',content: 'APs'}
];

// Configuration for the Timeline
var options = {
    width: '100%',
    type:'range',
    groupOrder: 'content',
    editable: true,
    groupEditable: true,
    orientation: 'top',
    tooltip:{followMouse:true},
    start: new Date(Date.now()),
    end: new Date(sixWeek), 
    groupTemplate: function (group) {
        var container = document.createElement('div');
        var label = document.createElement('span');
        var hide = document.createElement('img');
        label.innerHTML = group.content + ' ';
        label.style = "font-size:15px";
        container.insertAdjacentElement('afterBegin',label);
        hide.src = "cant show this";
        hide.className = "hide-btn";

        if (!(group.id.indexOf("_APs") >= 0)) {
            container.insertAdjacentElement('beforeEnd',hide);  
        }   

        return container;
    }
};

---

如何切换这些嵌套组的可见性？

解决方案是将组创建为数据集而不是数组

换句话说。这个

var groups = [
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
];

改成这个

var groups = new vis.DataSet();
groups.add([
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
]);

现在，嵌套组可见性通过组名称旁边的箭头按预期进行切换

var groups = new vis.DataSet();
groups.add([
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
]);