我有下面的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-->Th 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();
}
}发布于 2014-09-23 17:10:25
改变这一点:
$('.more_details').show();对此:
$(this).next('.more_details').show();为什么?
$('.more_details')选择类more_details的所有元素,其中$(this).next('.more_details')只选择相对于单击的元素具有类more_details的元素。对您的.hide()也进行同样的操作。
jsFiddle实例
https://stackoverflow.com/questions/26000835
复制相似问题