JQuery .slideToggle - 单击一个元素，它会显示所有隐藏的元素答案

【问题标题】：JQuery .slideToggle - click on one element and it shows all hidden elementsJQuery .slideToggle - 单击一个元素，它会显示所有隐藏的元素
【发布时间】：2013-02-04 11:45:27
【问题描述】：

这可能是一个非常愚蠢的问题，答案很明显，我认为我在使用 slideToggle 时可能是错误的，但我不知道该怎么做。

本质上，我希望用户单击不同的标题以仅隐藏/显示下面的段落。目前，如果您单击任何标题，它会显示所有隐藏的段落。

这是我目前使用的代码：

<a href="#"><div class="contenthead">
    Click here
</div></a>
<p class="content"> Lorem ipsum dolor</p>


<a href="#"><div class="contenthead">
    Click here now
</div></a>
<p class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing</p>


<script>
$('.contenthead').click(function() {
    $('.content').slideToggle('slow', function() {
    // Animation complete.
    });
});
</script>

请问有什么办法吗？

【问题讨论】：

你最好不要把<div>放在<a>中

标签： jquery slidetoggle

【解决方案1】：

使用parent() 和next() 函数。

$('.contenthead').click(function() {
    $(this).parent().next().slideToggle('slow', function() {
    // Animation complete.
    });
});

【讨论】：

@user1576659 没有问题，请不要忘记接受答案！

【解决方案2】：

看到你需要一个 jquery 插件在这个脚本的顶部和下面：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>

<script>
$(function(){ //<------------------------ use doc ready handler
   $('.contenthead').click(function() {
    $(this).parent().next('.content').slideToggle('slow');
   });
});          //<-------------------------
</script>

【讨论】：