0

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

我只是在这里遗漏了什么吗？

非常感谢

4

2 回答 2

2

试试这个 -

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

或者 -

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

工作演示

当你点击时什么都没有发生，clickable因为它没有任何孩子

于 2012-10-18T11:53:41.213 回答
2

因为当此锚不存在子级时，您使用with 类slideToggle的子级，所以您可以使用：anchorclickablesiblings

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

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

小提琴：http : //jsfiddle.net/QqMks/

于 2012-10-18T11:55:10.997 回答