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

Question

我需要有许多具有相同类的元素，并且它们中的内容在点击时会显示出来，但是现在因为它们都有相同的类，所以它们都同时打开。

我怎样才能让它只打开点击的那个而不打开其他的？

我的 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() {
$('.product_inner').slideToggle(300);
}); // end click

}); // end ready

Answer 1

当你做一个选择器时，你会在你的文档中找到所有元素你想要的是找到你真正想要使用的元素：

$(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

或另一种方法：

$(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

如果你有另一个 html 标记。

Answer 2

试试这个

JS代码

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

}); 

现场演示