菜鸟切换问题

Question

这里我漏掉了什么？当我点击'h2 a‘链接时，.content ol应该会切换。我不明白为什么它不能工作：

<script type="text/javascript">
$(document).ready(function(){
$(".content ol").hide();
$(".content h2 a").click(function(){
$(this).find(".content ol").toggle(400);
});
});
</script>

  <div class="content"> 
    <h2><a href="#">click me</a></h2>
    <ol>
      <p>Some text</p>
    </ol> 
  </div>

Answer 1

问题是find查找当前所选eleemnt的后代元素。您正在查看this中的内容，它就是所单击的链接。显然，ol不在a元素中。

您需要使用closest，才能沿着树向上到达div，然后才能使用find

$(".content h2 a").click(function(){
    $(this).closest('.content').find("ol").toggle(400);
});

Answer 2

@andy，我已经创建了一个jsfiddle，它可以为您清理一些幻灯片。应该可以在所有现代浏览器上运行。

http://jsfiddle.net/9QgmQ/3/

$(document).ready(function(){
    $(".content ol").hide();
        $(".content h2 a").click(function(){
        $('.content').find(" ol").slideToggle(400);
    });
});

您可能需要考虑使用$.(object).slideToggle()来实现平滑的向上/向下切换，而不是使用toggle()。