Развернуть jsTree node при нажатии на родителя

Я пытаюсь реализовать очень простое дерево с помощью jsTree. Я нашел документацию плотной и подавляющей.

В настоящий момент я разворачиваю/сворачиваю node, нажав стрелку, показанную здесь:

enter image description here

Я хочу иметь возможность развернуть/свернуть, нажав также имя node:

enter image description here

Код, который я использую, прост; Я не изменил javascript для jsTree:

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

Ответы

Ответ 1

Просто добавьте прослушиватель событий в свой 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)
});

Надеюсь, что это поможет.

Ответ 2

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

Это сработало для меня. oerls solution did not.

Ответ 3

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

и это будет работать

Ответ 4

Это стандартная функциональность при создании экземпляра jsTree:

$('#jstree').jstree({
  "plugins" : [ "wholerow" ]
});

jsTree API

Это приведет к переключению ветки, когда она нажала на всю строку.