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

Question

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

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

如果我点击每个孩子，它的相应信息就会显示出来。

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

例如：如果单击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'); 
});

小提琴链接：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');
            }
        }
    })
}

Answer 2

使用changed.jstree 事件。此事件在选择更改时触发，因此只需检查新选择的aria-level 是否为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": "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'); 
});

$('#mytree').on("changed.jstree", function (e, data) {
    if ($(".jstree-clicked").parent().attr("aria-level") == 1) {
        $(".jstree-clicked").next(".jstree-children").find("a.jstree-anchor:first").click();
    }
});

.hidden {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<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>