Question

我在我的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>

Answer 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]);
});

Answer 2

jsTree 3.3.1和IE7

通过按键为我工作

.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);

...

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

2 个答案: