Lets break it down step by step...
On Dec 21, 4:15 am, soupenvy <[EMAIL PROTECTED]> wrote:
> I've now got it doing what I want, thanks to the .prevAll() selector.
>
> However, the closing portion of my JS doesn't seem to work:
>
> $(document).ready(function() {
> $("#tabs > li").addClass("closed")
(1)...Every LI immediate child of #tabs now has a class of 'closed'
>
> $("#tabs > li.closed").click (function() {
(2)...For every element that you've just assigned the 'closed' class
to, now bind a click function (you could simply have chained this onto
the previous statement because it's working on the same set of
elements!)
> $(this).animate({top:'-387'},
> 500).removeClass("closed").addClass("open");
(2A)...Animated the clicked LI element and switch its class from
'closed' to 'open'
> $(this).prevAll().animate({top:'-387'},
> 500).removeClass("closed").addClass("open");
(2B)...Animated all preceding LI elements and switch their class from
'closed' to 'open'
> return false;
> });
>
> $("#tabs > li.open").click (function() {
(3)...For every LI immediate child of #tabs that has a class of
'open', bind a click function to it.
The only problem here is that you don't have any elements with a class
of 'open' because in step (1) above you gave them all a class of
'closed'! (and I assume an element cannot be both 'closed' and 'open'
at the same time).
So given that $('#tabs > li.open') contains an empty set, the
following click function will not be bound to anything.
When the document loads, it will run (1), then run (2), then run (3).
Then, when any element in the selected set in (2) [or (1), because
they're the same] is clicked on, then (2A) and (2B) will be run. You
can click on them as many times as you like, it is still (2A) and (2B)
that will run.
You have to remember that a selector will only pick up elements that
match its criteria *at the instant the selector is run*.
What you are attempting to do in step (3) is anticipate what some
elements *might* be selectable by at some point in the future, and
that won't work.
"So what do I do instead?" I hear you say.
Well, there is a plugin called Jquery Live which will do exactly what
you trying to do above, but for your case, that might be a bit like
using a bulldozer on a molehill - and wouldn't help you to get to
grips with the jQuery basics.
The simplest solution is just to bind a single click handler to your
LI elements, and within that handler check for the current class of
the element clicked and perform your opening or closing as
appropriate.
HTH
> $(this).animate({top:'0'},
> 500).removeClass("open").addClass("closed");
> $(this).nextAll().animate({top:'0'},
> 500).removeClass("open").addClass("closed");
> return false;
> });
>
> });
>
> Jquery gives open list items a class of "open" just fine, but clicking
> on those do nothing at all.
>
> Does it have something to do w/ the fact that jQuery has added the
> class open, but the document hasn't "reloaded"?
