erikholte (2) [Avatar] Offline
#1
The code for the collapsable list works in jquery-1.2.1.js
but with a new version jquery-1.3.2.js , when you click an
item to open it , the sub items also open at the same time.
Any ideas what changed or a work around?
THANKS

Message was edited by:
erikholte

Message was edited by:
erikholte
bear.bibeault (675) [Avatar] Offline
#2
Re: Collapsable List pg. 128
jQuery 1.3 made a bunch of incompatible changes that break some of the book's example code. I'm not sure yet what changed for that example. I'll put it on my list to check out.
erikholte (2) [Avatar] Offline
#3
Re: Collapsable List pg. 128
I'll go ahead and step back one version for this.
THANKS AGAIN.
bear.bibeault (675) [Avatar] Offline
#4
Re: Collapsable List pg. 128
It would be a good exercise to compare how they operate to determine what's acting differently (he says slyly).
awhite.az (2) [Avatar] Offline
#5
Re: Collapsable List pg. 128
My solution is to initialize all of the list items with children to collapsed by adding the following line of code after the .click handler:

$('li:has(ul)').css('list-style-image', 'url(images/plus.gif)').children().hide();

I'm guessing that the children with lists are not considered hidden the first time you click on a collapsed list.

Here is the code in full (sorry about the formatting):

$(function() {
$('li:has(ul)').click(function(event) {
if (this == event.target) {
if ($(this).children().is(':hidden')) {
$(this).css('list-style-image', 'url(images/minus.gif)').children().show();
} else {
$(this).css('list-style-image', 'url(images/plus.gif)').children().hide();
}
}
return false;
}).css('cursor', 'pointer').click();

$('li:has(ul)').css('list-style-image', 'url(images/plus.gif)').children().hide();
$('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' });
});