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

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代码

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

}); 

LIVE DEMO