2

HTML ページで jstree を使用しています。行の任意の場所 (つまり、小さな三角形のアイコン、フォルダー アイコン、フォルダー名) をクリックすることで、ツリーの一部を開いたり閉じたりできるようにしたいと考えています。小さな三角形のアイコンをクリックします。

問題を説明するための完全な自己完結型の例を次に示します。フォルダ アイコンをクリックして 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>
4

2 に答える 2

3

すでに "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]);
});
于 2013-11-13T15:03:21.707 に答える