jQuery Parent&儿童适用于SlideToggle

时间:2012-10-18 11:43:01

标签: jquery

我为购物网站构建了一个CSS菜单。想法是点击主要类别然后slideToggle开始并加载子类别。我已经构建了原则并且正在查看jQuery .children

但是当我点击链接时,什么也没发生。

我的jQuery如下:

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

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

我的HTML结构就像这样...

<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>

我在这里错过了一些东西吗?

非常感谢

2 个答案:

答案 0 :(得分:2)

试试这个 -

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

或 -

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

Working Demo

点击clickable时没有任何事情发生,因为它没有任何孩子

答案 1 :(得分:2)

由于您在slideToggle的小孩anchor的子级中使用clickable时,如果此锚没有子级,则可以使用siblings代替:

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

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

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