如果单击文件夹图标而不仅仅是三角形图标，如何让 jstree 关闭/打开答案

【问题标题】：How do I get jstree to close/open if you click on folder icon not just the triangle icon如果单击文件夹图标而不仅仅是三角形图标，如何让 jstree 关闭/打开
【发布时间】：2013-11-13 14:14:54
【问题描述】：

我在我的 html 页面上使用 jstree 我希望能够通过单击行上的任意位置来打开和关闭树的某些部分（即，小三角形图标、文件夹图标和文件夹名称。）而不是而不是点击小三角形图标。

这是一个完整的自包含示例来演示问题。我希望能够通过单击文件夹图标或“C:\Music”来关闭 C:\Music 文件夹，这可能吗？

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../style/songkong.css">
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<script type="text/javascript" class="source below">
$(function () {
$("#songchanges")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
"core" : { "initially_open" : [ "phtml_1" ] }
})
.bind("loaded.jstree", function (event, data) {})
;
$("#songchanges").bind("open_node.jstree", function (e, data) {
data.inst.select_node("#phtml_1", true);
});
});
</script></head>
<body>
<div id="songchanges"><ul>
<li id="phtml_1">
<a href="#">C:\Music\</a>
<ul>
<li id="phtml_2">
<a href="#">KungFooFighting1.mp3</a>
</li>
<li id="phtml_3">
<a href="#">KungFooFighting2.mp3</a>
</li>
</ul>
</li>
</ul>
</div>

</body>
</html>

【问题讨论】：

标签： javascript html jstree

【解决方案1】：

由于您已经使用“ui”插件，您可以将事件处理程序附加到select_node.jstree event。然后使用内部处理程序$(this).jstree('toggle_node', data.rslt.obj[0]); 打开和关闭特定的树节点。

完整的代码如下所示：

$("#songchanges").bind("select_node.jstree", function (e, data) {
  $(this).jstree('toggle_node', data.rslt.obj[0]);
});

【讨论】：

Thx @user2988142 但现在似乎对我不起作用我根本无法打开树
看来我需要使用wholerow插件，但没有在jstree v1中实现，v2出现问题会产生新问题
您应该从 open_node.jstree 处理程序中删除 data.inst.select_node("#phtml_1", true);。因为每次打开它都会关闭树。完整工作示例 - jsbin.com
感谢完美运行，jsbin.com 看起来也是一个有用的工具

【解决方案2】：

jsTree 3.3.1 和 IE7

使用 keydown 为我工作

.bind("select_node.jstree", function (e, data) {
        var e = jQuery.Event("keydown");
        e.which = 39; // to right
        $('#myjstree a[id=' + data.node.id + '_anchor]').trigger(e);

...

【讨论】：