Avoid merging a tree by clicking on a tree in jquery

Question

I need to avoid jquery treeview crash when clicking links / text of treeview.

For example, if I display a list of directories/subdirectories in a treeview, I need to collapse the tree only when clicking +/- image , and not when clicking directories

Answer 1

You will need to update the javascript treeview code itself. For Treeview 1.4, comment on the following lines (66-68):

 this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) { toggler.apply($(this).next()); }).add( $("a", this) ).hoverClass(); 

This will ensure that the expand / collapse happened only on the +/- click. Expanding all and minimizing the entire function will continue to work, if applicable.

Even better, you specify a new argument when defining the tree, and only if the condition is met do you override the default functionality. For instance,

 if (settings.expandMode != 'simple'){ this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) { toggler.apply($(this).next()); }).add( $("a", this) ).hoverClass(); } 

And your treeview definition might look like this:

 $("#tree").treeview({ animated: "fast", persist: "cookie", collapsed: true, control: "#treecontrol", expandMode: "simple" // custom - only toggles per the +/- icon }) 

I hope you get this idea. Good luck.

Answer 2

Bind the click event to +/-, and not to the container containing the image and directory text.

So, if your HTML looks like this:

 <ul class="dir-list"> <li> <div><img class="expand" src="expand.gif" /><span>Directory Name</span></div> <ul> <li><div><img class="expand" src="expand.gif" /><span>Sub Directory Name</span></div></li> </ul> </li> </ul> 

You would attach your click to the image by following these steps:

 $('.dir-list img.expand').click(function(){ //Do stuff here to expand or collapse the area });