Question

我有一个包含图像的div，我想要以440px高开始，带有“显示更多”按钮，使其达到全高（2750px）。在完全高度时，我希望show more按钮显示'show less'，并且当我点击它时功能会被反转。

这是我的代码：

 $('#photo_container').css('height','440px');
$('#photo_container').css('overflow','hidden');
$('.show_more').click(function(){
$('#photo_container').animate({'height':'2750px'},500);
$('.show_more').html('<h4>Show Less</h4>');
$('.show_more').addClass('show_less');
$('.show_more').removeClass('show_more');
});                        
$('.show_less').click(function(){
$('#photo_container').animate({'height':'440px'},500);
$('.show_less').html('<h4>Show More</h4>');
$('.show_less').addClass('show_more');
$('.show_less').removeClass('show_less');

});

和我的HTML：

<div id="photo_container">
PHOTOS HERE...
</div>
<div class="show_more"><h4>Show more</h4></div>

我的代码允许我扩展，但它不会以相反的方式工作（显示更少）。任何人都可以向我解释为什么这是

Answer 1

将您的活动更新为：

$(document).on('click', '.show-less', function() {
$(document).on('click', '.show-more', function() {

因为您正在更改类，所以需要绑定到类而不是元素。

jQuery显示更多/在div中显示更少的切换高度

1 个答案: