jQuery in Action
132
CHAPTER 5
Sprucing up with animations and effects
.css('cursor','pointer')
.click();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
There isn't a whole lot of code to this ready handler, but there is a lot of activity.
First, we select all list items that possess list children by applying the jQuery
containment selector
li:has(ul)
b
, and apply a chained series of jQuery com-
mands to the matched elements, beginning with attaching a
click
handler
c
.
This click handler checks to make sure that the
target
element of the
event
matches
this
. This is true only when the clicked item is the same as the one on
which the listener was established; it allows us to ignore clicks on the child ele-
ments. After all, we only want to open and close an item when users click the par-
ent item, not one of its children.
ments. After all, we only want to open and close an item when users click the par-
ent item, not one of its children.
If we determine that a parent item has been clicked, we then determine if its
children are hidden or shown by employing the handy
is()
command using the
:hidden
filter
d
. If the children are hidden, we reveal them using
show()
, and if
shown, we hide them using
hide()
. In either case, we change the parent item
marker to the plus or minus image (as appropriate) and return
false
as the value
of the listener
e
to prevent needless propagation.
We set the mouse cursor shape to the active pointer using the
css()
command
f
and hide the child elements for the active items, performing the actions
defined within the
else
clause of the
if
statement in the click handler, by invok-
ing the click handler
g
.
As the final step before users can interact with the page, we need to sledge-
hammer some styling elements for the leaf items
h
. We've set the
list-style-
image
style (which controls the item marker) of the active items to one of the plus
or minus
GIF
images, and we don't want that setting to be inherited by the list
items that are children of those items. To prevent that inheritance, we explicitly
set that
set that
list-style-image
style property value to
none
for all leaf list items.
Because we have set it directly on the items, it will take precedence over any
inherited value.
inherited value.
We do the same for the mouse cursor for the leaf items by setting it to the
default mouse cursor shape. Otherwise leaf items contained by an active parent
would inherit the active cursor shape.
would inherit the active cursor shape.
f
g
h