适用于SlideToggle的jQuery父母与子女

Question

I have built a CSS Menu for a shopping site. The idea is the main category gets clicked then the slideToggle kicks in and loads the subcategories. I have the principles built and was looking at jQuery .children

However when I am clicking the link, Nothing is happening.

My jQuery is as follows :

$('ul.sub_menu').css('display','none');

$(".nav-list li a.clickable").toggle(function () {
  $(this).children().slideToggle();
}, function() {
  $(this).children().slideToggle();
}

My HTML Structure Goes Like This...

<ul class="nav nav-list">
  <li>

    <a class="clickable" href="#">Christmas</a>

    <ul class="sub_menu">
      <li>
        <a href="/~sweetdis/category/wreaths" >Wreaths</a>
      </li>
      <li>
        <a href="/~sweetdis/category/large-logs">Large Logs</a>
      </li>
    </ul>

  </li>
</ul>

Am I just missing something here?

Many Thanks

Answer 1

Try this -

$('.sub_menu').hide();
$('.clickable').click(function(){
    $(this).next('ul').slideToggle();
});

Or -

$('.ulClass li a:first').click(function(){
    $(this).next('ul').slideToggle();
});

Working Demo

Nothing is happening when you click on clickable because it doesn't have any children

Answer 2

Because you use slideToggle for the children of the anchor with class clickable when there is no children of this anchor exist, you can use siblings instead:

$('ul.sub_menu').css('display','none');

$(".nav-list li a.clickable").click(function () {
    $(this).siblings('ul.sub_menu').slideToggle();
});​

FIDDLE: http://jsfiddle.net/QqMks/