当按钮被点击时jQuery显示特定的div部分

Question

我有以下的html和jQuery脚本，我想要做的是当用户点击一个按钮来显示.more_details类的具体细节。 事情是，现在这是工作，但不是我想要的方式。 当您单击html按钮时，所有包含在.more_details中的html元素都显示出来，但我只想显示相关的元素。 任何帮助，将不胜感激。

的HTML如下：

<div class="column effect"> 
<button class="btn">Show More</button> 

    <div class="more_details"> 
    this is shown on click of the button 
    </div><!-- more_details --> 

</div><!-- column effect--> 

<div class="column effect"> 
<button class="btn">Show More</button> 

    <div class="more_details"> 
    this is shown on click of the button 
    </div><!-- more_details --> 

</div><!-- column effect--> 

钍jQuery脚本：

$(document).ready(function(){ 

    $('.effect').on('click', 'button', showMoreLess); 

}); 

function showMoreLess() { 

    var buttonText = $(this).text(); 

    if (buttonText=="Show More"){ 

    $(this).text("Show Less"); 
    $('.more_details').show(); 
    event.stopPropagation(); 
    } 
    else { 

    $(this).text("Show More"); 
    $('.more_details').hide(); 
    event.stopPropagation(); 
    } 

} 

Answer 1

更改此：

$('.more_details').show(); 

这样：

$(this).next('.more_details').show(); 

为什么？

$('.more_details')选择与类more_details，其中$(this).next('.more_details')与类more_details相对到被点击该元素仅选择该元素的所有元素。对你的.hide（）也做同样的事情。

jsFiddle example