展开并折叠div

时间:2013-06-30 14:26:57

标签: javascript jquery

$('.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;
});

2 个答案:

答案 0 :(得分:2)

您应该使用事件委派和.on。事件处理程序在声明时受到约束,因此在附加处理程序时未将button-up类分配给元素,所以没有附加任何内容。

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

答案 1 :(得分:1)

这是因为当您使用jquery click函数绑定click事件时,没有元素具有button-up类。因此,一种方法是使用jquery on方法或使用toggle方法将一个状态连续地转换为另一个状态。