当单击父节点时展开jsTree节点

Question

我正在尝试使用 jsTree 实现一个非常简单的树形结构。但是，我发现文档非常复杂和令人不知所措。

现在，我通过点击这里显示的箭头来展开/折叠节点：

我想要能够通过单击节点名称来展开/折叠节点：

我正在使用的代码很简单；我没有修改 jsTree 的 javascript 代码：

<ul id="tree">
   <li>
      SubFolder1
      <ul id="tree">
         <li data-jstree='{"icon":"/Images/blue-folder.png"}'>Pub 1</li>
      </ul>
   </li>
</ul>

- John 'Mark' Smith

---

可能是单击节点时打开分支？的重复问题。 - kostmo

Answer 1

$('#tree').on('select_node.jstree', function (e, data) {
    data.instance.toggle_node(data.node);
});

那对我有效。oerls的解决方案无效。

- itmuckel

Answer 2

在你的html文件中添加事件监听器并调用toggle_node函数即可。下面的代码监听单击事件。

$(document).ready(function(){
  $('#jstree_div').on("select_node.jstree", function (e, data) { $('#jstree_div').toggle_node(data.node); });
}

如果您希望监听双击事件，您需要另一个事件监听器，因为jsTree尚不支持双击事件。

$('#jstree_div').on("dblclick",function (e) { 
  var li = $(e.target).closest("li");
  var node = $('#jstree_div').get_node(li[0].id);

  $('#jstree_div').toggle_node(node)
});

希望能对你有所帮助。

- oerl

---

它现在支持双击链接。 - chech

Answer 3

$('#jstree').on("select_node.jstree", function (e, data) { 
     $('#jstree').jstree("toggle_node", data.node);
 });

这个也可以工作。

- Abdulaziz N