Question

This is my HTML:

  <ul class="test">
   <li><a href="#">One</a>
    <ul>
     <li>Content One</li>
    </ul>
   </li>
   <li><a href="#">Two</a>
    <ul>
     <li>Content Two</li>
    </ul>
   </li>
  </ul>

I want to hide UL.TEST LI UL. When I click anchor “one” or when I click “ul.test li” or “ul.test li a”

How will I do it without using a CLASS or ID in the “ul.test li ul”?

My code is:

  $(function(){
   $("ul.test li").click(function(e){
    e.preventDefault();
    $(this).slideToggle("fast");
   });
  });

What I want to do:

  $(this + "ul").slideToggle("fast");

I want to hide only ul.test li ul only.

what if?

$("ul.test li a").click(function(e){
  $('ul', this).slideToggle("fast");
});

how will I go back to ul.test li using $('ul', this).slideToggle("fast");

Answer 1

Try this:

$("ul.test li").click(function(e){
  $('ul', this).slideToggle("fast");
});

Demo: http://jsfiddle.net/9KAhT/

$("ul.test li a").click(function(e){
   $(this).next().slideToggle("fast");
});