展开和折叠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函数没有元素有button-up类。所以一种方法是使用jquery on方法或使用toggle方法将一个状态连续切换到另一个状态。