Question

我为购物网站构建了一个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>

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

非常感谢

Answer 1

试试这个 -

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

或 -

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

Working Demo

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

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

jQuery Parent＆amp;儿童适用于SlideToggle

2 个答案: