javascript - 如何在点击父节点时打开子节点

Question

我有一个 jstree(版本 3.0.0)。我已经用 json 生成了树。树深一层。看起来有点像

• 家长1
  • child 1
  • child 2
• 家长2
  • child 3
  • child 4

如果我点击每个 child ，就会显示相应的信息。

问题:我没有要向 parent 显示的内容。所以如果我点击 parent ，它的第一个 child 应该被自动选中。有什么办法吗？

例如:如果点击Parent1，那么应该显示Child1内容，对于Parent2，Child3内容应该显示。

我曾尝试使用点击事件以及添加和删除类来执行此操作，但没有得到预期的结果。请参阅下面的代码:

    <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>

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": "Laptops"},
]; 
var all_p = $('.pele');
$('#mytree').jstree({
    'core': {
        'data': arrayCollection
     }
}).on(
      "select_node.jstree", function(evt, data){
          all_p.each(function(){
              if(this.id === data.node.id){
                  $(this).removeClass('hidden');
              }else{
                  if(!$(this).hasClass('hidden')){
                       $(this).addClass('hidden');
                  }
              }
           })
 });

$("#mytree >ul >li >a").on('click', function(){
      $(this).prev('i').trigger('click');
      $(this).next('ul.jstree-children li a').toggleClass('jstree-clicked'); 
});

fiddle 链接:https://jsfiddle.net/khz65nv0/3/

例如:如果点击Parent1，那么应该显示Child1内容，对于Parent2，Child3内容应该显示。

Answer 1

您可以检查所选节点是否为根节点，然后获取它的第一个子节点 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');
            }
        }
    })
}