javascript - jQuery FancyTree, on click expand issue -

i'm doing selection tree of fancytree plugin , i'm trying implement on click event work in way when click on title of select box, of subitems , gets expanded in levels.

to begin with... let me show script:

var treedata = [     {title: "item1 key , tooltip", tooltip: "look, tool tip!",         children: [             {title: "sub-item 3.1",                 children: [                     {title: "sub-item 3.1.1", key: "id3.1.1" },                     {title: "sub-item 3.1.2", key: "id3.1.2" }                 ]             },             {title: "sub-item 3.2",                 children: [                     {title: "sub-item 3.2.1", key: "id3.2.1" },                     {title: "sub-item 3.2.2", key: "id3.2.2" }                 ]             }         ]     },     {title: "item2: selected on init",           children: [             {title: "sub-item 4.2",                 children: [                     {title: "sub-item 4.2.1", key: "id3.1.1" },                     {title: "sub-item 3.2.2", key: "id3.1.2" }                 ]             },             {title: "sub-item 3.2",                 children: [                     {title: "sub-item 3.2.1", key: "id3.2.1" },                     {title: "sub-item 3.2.2", key: "id3.2.2" }                 ]             }         ] }, ];  $(function(){              $(".test").fancytree({     //          extensions: ["select"],                 checkbox: true,                 selectmode: 3,                 source: treedata,                 select: function(e, data) {                     // list of selected nodes, , convert key array:                     var selkeys = $.map(data.tree.getselectednodes(), function(node){                         return node.key;                     });                     $("#echoselection3").text(selkeys.join(", "));                      // list of selected top nodes                     var selrootnodes = data.tree.getselectednodes(true);                     // ... , convert key array:                     var selrootkeys = $.map(selrootnodes, function(node){                         return node.key;                     });                     $("#echoselectionrootkeys3").text(selrootkeys.join(", "));                     //$("#echoselectionroots3").text(selrootnodes.join(", "));                 },                 //this problematic 1                 click: function(e, data) {                    data.node.toggleexpanded();                 },                 keydown: function(e, data) {                     if( e.which === 32 ) {                         data.node.toggleselected();                         return false;                     }                 },                 // following options required, if have more 1 tree on 1 page:     //              initid: "treedata",                 cookieid: "fancytree-cb3",                 idprefix: "fancytree-cb3-"             });             $("#btntoggleexpand").click(function(){                 $(".test").fancytree("getrootnode").visit(function(node){                     node.toggleexpanded();         });         return false;     });          }); 

issue

i tried part of code:

click: function(e, data) {                data.node.toggleexpanded();             }, 

but problem expand subitems of selectbox on select too, , not wanna that. , if expand 1 node, , try open 1 of arrows on left, second node expands , hides on click arrow, not want..

you can see , edit situation in here: http://jsfiddle.net/9vahz/

so migh said got in sort of "no way out" siutation , need smarter show me how sort out, event use not clashes fancytree default behaviour.

any or suggestion welcome.

you check if click on select button

click: function(event, data) {     var node = data.node,         tt = $.ui.fancytree.geteventtargettype(event.originalevent);     if( tt === "checbox" ) {         ...     } }, 

or implement in select event instead of click.