Bug Tracker

Opened 9 years ago

Closed 8 years ago

Last modified 4 years ago

#1457 closed bug (worksforme)

treeview does not display lastCollapsable

Reported by: jgriffin316 Owned by:
Priority: major Milestone: 1.1.4
Component: plugin Version: 1.1.3
Keywords: treeview Cc:
Blocked by: Blocking:


If the last item in a sublist is another sublist the lastCollapsable icon is not displayed. This has been tested on Firefox 2.0 and IE 6.0. In the example listed below Item 2.2 should have lastCollapsable as a class, instead it has last. I am using jQuery 1.1.3 and treeview 1.2.

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Treeview Test</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul").Treeview(); }); </script>

<style type="text/css">

.treeview, .treeview ul {

padding: 0; margin: 0; list-style: none;


.treeview li {

margin: 0; padding: 4px 0 3px 20px;


.treeview li { background: url(images/tv-item.gif) 0 0 no-repeat; } .treeview .collapsable { background-image: url(images/tv-collapsable.gif); } .treeview .expandable { background-image: url(images/tv-expandable.gif); } .treeview .last { background-image: url(images/tv-item-last.gif); } .treeview .lastCollapsable { background-image: url(images/tv-collapsable-last.gif); } .treeview .lastExpandable { background-image: url(images/tv-expandable-last.gif); }


</head> <body> <ul>

<li>Item 1


<li>Item 1.1</li>


</li> <li>Item 2


<li>Item 2.1


<li>Item 2.1.1</li> <li>Item 2.1.2</li>


</li> <li>Item 2.2


<li>Item 2.2.1</li> <li>Item 2.2.2</li>





</ul> </body> </html>

Change History (4)

comment:1 Changed 8 years ago by mbirth

This can be solved by removing these lastCollapsable and lastExpandable appearances (lines# 113, 114, 187, 196, 216 and 221) from the treeview source code so that all last elements have both classes, "last" and "collapsable", assigned. You just have to change the CSS code to:

.treeview .last.collapsable { background-image: url(img/treeview/tv-collapsable-last.gif); }
.treeview .last.expandable { background-image: url(img/treeview/tv-expandable-last.gif); }

Works fine for me. You can even replace the remaining few replaceClass() and swapClass()-calls by chained toggleClass() or removeClass().addClass() statements and then remove those two functions.

comment:2 Changed 8 years ago by mbirth

Just for the curious ones:

0186: .swapClass( CLASSES.collapsable, CLASSES.expandable )

can be replaced by

0186: .toggleClass( CLASSES.collapsable ).toggleClass( CLASSES.expandable )


0195: .replaceclass( CLASSES.collapsable, CLASSES.expandable )


0195: .filter( CLASSES.collapsable ).removeClass( CLASSES.collapsable ).addClass( CLASSES.expandable ).end()

Then you can remove lines 138 through 153 (swapClass and replaceClass).

comment:3 Changed 8 years ago by gnattali

this problem occurs when the target "ul" is not specified uniquely.
so in this example case

$(document).ready(function(){ $("ul").Treeview(); });

this part should be like following

$(document).ready(function(){ $("body > ul").Treeview(); });

if you don't like to care about these kind of trivial things, change the source as follows

0216: .swapClass(CLASSES.last, CLASSES.lastExpandable)


0216: .replaceclass(CLASSES.last, CLASSES.lastExpandable)


221: .swapClass(CLASSES.last, CLASSES.lastCollapsable)


221: .replaceclass(CLASSES.last, CLASSES.lastCollapsable)

comment:4 Changed 8 years ago by joern

  • Resolution set to worksforme
  • Status changed from new to closed

I can't replicate the initial issue.

From the suggested code improvements, only the last one actually works. Commited in revision [3471].

Note: See TracTickets for help on using tickets.