展開和折疊div

Question

$('.button-up').click(function(){ // }的代碼未觸發。我找不到問題。這是我想做的在線演示。

http://jsfiddle.net/UfnCn/

$('.button-up').click(function(){
    $('.description').animate({height: '80px'}, 400);
    $(this).removeClass('button-up');
    $(this).html('read more');
    $(this).addClass('button-down');
    return false;
});
$('.button-down').click(function(){
    var height = $('.description').css('height','auto').height() + 20; 
    $('.description').css('height','125px'); 
    $('.description').animate({height: height+'px'}, 400);
    $(this).addClass('button-up');
    $(this).html('collapse');
    $(this).removeClass('button-down');
    return false;
});

Answer 1

您應該使用事件委托和.on 。 事件處理程序是在聲明時綁定的，因此，由於在附加處理程序時未將button-up類分配給元素，因此不會附加任何內容。

您應該能夠執行類似$("p.overlay").on("click", ".button-up", function(){..}); 。 將處理程序附加到不會更改的按鈕祖先（文檔始終是安全的選擇）中的任何元素上，然后使用選擇器進行過濾。

Answer 2

那是因為當你用jquery click函數綁定click事件時，沒有元素具有button-up類。 因此，一種方法是on方法on使用jquery或使用toggle方法將一種狀態連續切換到另一種狀態。