ansaurus

Question

Answer 1

+2 A:

When you click on the span you get the parent of the spam (the a) and look for its ul children — it doesn't have any.

You need to go up another level.

David Dorward 2009-08-16 12:01:49

Using `$(this).parent().parent().children('ul').hide();` doesn't seem to work either, assuming that's how you do it. It does make the child `ul` flash, but not stay hidden.

James Inman 2009-08-16 12:08:13

Answer 2

A:

'this' represents DOM element. You need jQuery wrapper for it, $(this). Try

$(this).parent().children('ul').hide();

Roman 2009-08-16 12:06:15

Sorry, that was an error when I copied across - fixed and it still doesn't work.

James Inman 2009-08-16 12:07:23

Answer 3

+1 A:

You can shorten this by navigating directly to the parent (note: parents('selector') climbs the ancestors until a match, no more .parent().parent()... guessing):

$(this).parents('li').find('ul').hide();

Also, I suggest this for more effect:

$(this).parents('li').find('ul').slideUp();

Your ul elements aren't children of your span or your anchor, they're children of the li they both belong to. Traversing up to this then hiding all ul beneath is what you're after I believe.

Nick Craver 2009-08-16 12:14:26

Answer 4

+1 A:

The following works, clicking the arrow (and only by clicking the arrow, though I suspect that's intentional on your part), hides the child <ul>, in FF3.0.12, Ubuntu 8.04. Though for some reason it seems unnecessarily complex.

<script type="text/javascript">
 if ($) {
  $(document).ready(

   function() {

    $('ul li span').click(

     function() {

          $(this).parent().parent().children('ul').hide(); // Original (modified) technique

// Nick's technique: $(this).parents('li').find('ul').hide();
// My preferred technique: $(this).parents('li').find('ul').toggle();
         }

    );

   }

  );
 }
</script>

David Thomas 2009-08-16 12:21:57

ansaurus

tags:

views:

answers:

jQuery - Hiding elements not working

related questions