Jquery 当多个实例具有相同的类时，只向下滑动一个实例

我需要有许多元素具有相同的类，并且它们内部的内容在单击时显示，但是现在由于所有元素都具有相同的类，所以所有元素都会立即打开

我如何使它只打开单击的一个而不打开其他的

我的HTML：

<div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>
    <div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>
    <div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>

---

当您执行选择器时，您将在文档中找到所有元素，您需要的是找到您实际想要使用的元素：

$(document).ready(function() {
    $('.product p a').click(function() {
        $(this) // the current a-element that was clicked
            .parent() // p
                .next() // find the next element from <p> (.product_inner) 
                    .stop() // stop animation
                    .slideToggle(300); // Slide toggle
    }); // end click

}); // end ready

如果您有其他html标记。

请尝试此操作

JS代码

$(document).ready(function() {
   $('.product p a').click(function() {
      $(this).parent('p').siblings('.product_inner').slideToggle(300);
    }); // end click

}); 

---

就是这样。谢谢我会尽快接受这个答案（7分钟）@OliveraKovacevic我建议你用我的来代替。更新：这个答案已经涵盖了我的解决方案。我仍然推荐方法#2。我同意@JanDvorak的#2方法并不像第一个答案那样局限于标记。@voigtan这就是我建议的原因。我更喜欢另一个答案提供的最接近的查找方法。永远不要对我说“父母”。

$(document).ready(function() {
    $('.product p a').click(function() {
        $(this) // the current a-element that was clicked
            .closest('.product') // .product
                .find('.product_inner') // find .product_inner inside .product
                    .stop() // stop animation
                    .slideToggle(300); // Slide toggle
    }); // end click

}); // end ready

$(document).ready(function() {
   $('.product p a').click(function() {
      $(this).parent('p').siblings('.product_inner').slideToggle(300);
    }); // end click

});