Question

当我点击向下箭头图像时，它会将注释div调整为400px并添加类向上箭头（显示不同的图像）。当我点击向上箭头图像而不是向上320px时，它再次下降320px。我做错了什么？

    $('.arrow-down').click(function() {
            $('.comment').animate({height: '+=320px'}, 1000);   
        $(this).removeClass('arrow-down');
        $(this).addClass('arrow-up');
    });

    $('.arrow-up').click(function() {
            $('.comment').animate({height: '-=320px'}, 1000);   
        $(this).removeClass('arrow-up');
        $(this).addClass('arrow-down');
    });

Answer 1

您需要使用委托事件处理程序，因为您在页面加载后更改了元素上的类：

＆＃13;

$(document).on('click', '.arrow-down', function() {
  $('.comment').animate({ height: '+=320px' }, 1000);
  $(this).toggleClass('arrow-down arrow-up');
}).on('click', '.arrow-up', function() {
  $('.comment').animate({ height: '-=320px' }, 1000);
  $(this).toggleClass('arrow-down arrow-up');
});

＆＃13;

.comment {
  padding: 5px;
  border: 1px solid #CCC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment">This is a comment...</div>
<div class="arrow-down">Click me</div>

＆＃13;

Answer 2

希望这有助于你

$(document).on('click', '.arrow-down', function(event) {
    $('.comment').animate({height: '+=320px'}, 1000);
    $(this).removeClass('arrow-down');
    $(this).addClass('arrow-up');
});
$(document).on('click', '.arrow-up', function(event) {
    $('.comment').animate({height: '-=320px'}, 1000);
    $(this).removeClass('arrow-up');
    $(this).addClass('arrow-down');
});

JQuery - 单击时调整div

2 个答案: