Mở rộng nút jsTree khi cha mẹ được nhấp vào

Question

Tôi đang cố gắng triển khai một cây rất đơn giản bằng cách sử dụng jsTree. Tôi đã tìm thấy tài liệu dày đặc và áp đảo.

Ngay bây giờ, tôi expand/collapse một nút bằng cách nhấn vào mũi tên đưa ra ở đây:

Tôi muốn để có thể mở rộng/thu hẹp bằng cách nhấn vào tên nút quá:

Mã tôi đang sử dụng rất đơn giản; Tôi chưa thay đổi javascript cho jsTree:

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

Answer 1

Chỉ cần thêm trình xử lý sự kiện vào tệp html của bạn và gọi hàm toggle_node. Mã này dưới đây lắng nghe một nhấp chuột duy nhất.

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

Nếu bạn muốn nghe nhấp đúp, bạn cần một trình xử lý sự kiện khác, vì jsTree không hỗ trợ sự kiện nhấp đúp.

$('#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) 
}); 

Hy vọng điều đó sẽ hữu ích.

Answer 2

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

Điều đó phù hợp với tôi. oerls giải pháp không.

Answer 3

Đây là chức năng tiêu chuẩn khi bạn tạo ra các thể hiện của jsTree:

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

jsTree API

này sẽ chuyển đổi chi nhánh nơi bao giờ nó đã nhấp vào toàn bộ hàng.

Answer 4

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

cũng sẽ làm việc này