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

Question

我有一个div，包含图像，我想要440px高开始，与'显示更多'按钮，使其全高（2750px）。当处于全高时，我希望显示更多按钮可以读取“显示更少”，并在单击时显示该功能。

这里是我的代码：

$('#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() { 

因为你改变类，你需要绑定到类，而不是元素。