[jQuery] toggle show hide - help
Hi,
Im working my way through the book 'jQuery in Action' and i'm a bit stumped
with a block of code and how it works.
The Code :
$(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target) {
$(this).children().toggle();
$(this).css('list-style-image',
($(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
}
return false;
})
.css('cursor', 'pointer')
.click();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
http://www.nabble.com/file/p20479875/collapsible.list.take.2-me.html
collapsible.list.take.2-me.html
What I can't get my head around is how the page is set up on load, the ul
image is set dependent on the click state,
if (this == event.target) {...
so to me this code says, when clicked and if the clicked element is in the
jQuery group, then change the image and toggle (display/hide) the children.
But what I don't get is how the states / images are set on initial page load
when nothing has been clicked.
Thanks for any pointers
Brian
--
View this message in context: http://www.nabble.com/toggle-show-hide---help-tp20479875s27240p20479875.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.