Javascript 如何在单击父节点时打开子节点

我有一个jstree（版本3.0.0）。我已经用json生成了树。这棵树有一层深。看起来像

• 父母1
  • 孩子1
  • 孩子2
• 父母2
  • 孩子3
  • 孩子4

如果我单击每个子项，就会显示相应的信息

问题: 我没有为家长显示的内容。所以，如果我点击parent，它的第一个子项应该会自动被选中。有没有办法做到这一点

例如：如果单击了

Parent1

，则应显示

Child1

内容，对于

Parent2

，应显示

Child3

内容

我曾尝试使用click事件和添加和删除类来实现这一点，但没有得到预期的结果。请参见下面的我的代码：

    <div id="mytree"></div>
    <p class="hidden pele" id="dog">I'm Dog</p>
    <p class="hidden pele" id="lion">I'm Lion</p>
    <p class="hidden pele" id="mobile">I'm Mobile</p>
    <p class="hidden pele" id="lappy">I'm Lappy</p>

小提琴链接：

---

例如：如果单击了

Parent1

，则应显示

Child1

内容，对于

Parent2

，应显示

Child3

内容。

您可以检查所选节点是否为根节点，然后获取其第一个子id

"select_node.jstree", function(evt, data){
    let nodeid = data.node.id;

    if(data.node.parent === "#" && data.node.children_d.length > 0){
      nodeid = data.node.children_d[0]
    }
    all_p.each(function(){
        if(this.id === nodeid){
            $(this).removeClass('hidden');
        }else{
            if(!$(this).hasClass('hidden')){
                $(this).addClass('hidden');
            }
        }
    })
}

---

使用

changed.jstree

事件。此事件在选择更改时触发，因此只需检查新选择的

aria级别

，如果该级别为

1

，则表示已选择父节点，然后只需再次触发单击以选择子节点

var arrayCollection=[
{“id”：“animal”，“parent”：“#”，“text”：“Animals”，“state”：{“selected”：true}，
{“id”：“device”，“parent”：“#”，“text”：“Devices”}，
{“id”：“dog”，“parent”：“animal”，“text”：“Dogs”}，
{“id”：“lion”，“parent”：“animal”，“text”：“Lions”}，
{“id”：“mobile”，“parent”：“device”，“text”：“mobile Phones”}，
{“id”：“lappy”，“parent”：“device”，“text”：“lapps”}，
]; 
var all_p=$（'.pele'）；
$（'#mytree'）.jstree({
“核心”：{
“数据”：arrayCollection
}
}).在(
“select_node.jstree”，函数（evt，数据）{
所有p.每个（函数（）{
if（this.id==data.node.id）{
$（this.removeClass（'hidden'）；
}否则{
if（！$（this）.hasClass（'hidden'））{
$（this.addClass（'hidden'）；
}
}
})
});
$（“#mytree>ul>li>a”）。在（'click'，function（）上{
$（this.prev（'i'）.trigger（'click'）；
$（this）.next（'ul.jstree-children li a'）.toggleClass（'jstree-clicked'）；
});
$（'#mytree'）。关于（“changed.jstree”，函数（e，data）{
如果（$（“.jstree已单击”）.parent（）.attr（“aria级别”）==1）{
$（“.jstree已单击”）.next（“.jstree子项”）.find（“a.jstree-anchor:first”）.click（）；
}
});
。隐藏{
显示：无；
}

我是狗
我是狮子
我是移动的
我是lappy
"select_node.jstree", function(evt, data){
    let nodeid = data.node.id;

    if(data.node.parent === "#" && data.node.children_d.length > 0){
      nodeid = data.node.children_d[0]
    }
    all_p.each(function(){
        if(this.id === nodeid){
            $(this).removeClass('hidden');
        }else{
            if(!$(this).hasClass('hidden')){
                $(this).addClass('hidden');
            }
        }
    })
}