Question

我需要拥有SAME类的众多元素，以及单击时显示的内容，但是现在因为它们都具有相同的类，所有这些元素一次打开。

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

我的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>

JQuery的：

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

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

});

<强> LIVE DEMO

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

2 个答案: