javascript - 展开和折叠 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

您应该使用事件委托(delegate)和.on。事件处理程序在声明时绑定(bind)，因此由于在附加处理程序时未将 button-up 类分配给该元素，因此不会附加任何内容。

您应该能够执行类似 $("p.overlay").on("click", ".button-up", function(){..}); 的操作。将处理程序附加到按钮祖先(文档始终是安全的选择)中不会更改的任何元素，然后使用选择器进行过滤。