我有以下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();
}
}
答案 0 :(得分:1)
改变这个:
$('.more_details').show();
到此:
$(this).next('.more_details').show();
为什么?
$('.more_details')
选择类more_details
的所有元素,其中$(this).next('.more_details')
仅选择具有类more_details
relative 的元素到该元素点击了。对你的.hide()做同样的事情。
<强> jsFiddle example 强>