jquery - 我缺少什么？在这段代码上

Question

我正在尝试打开和关闭面板。使用这个..

$('.closed').click(function(){

    $('.social_bar').animate({right: "20px"},800);
    $(this).removeClass('closed');
    $(this).addClass('opened');

});

$('.opened').click(function(){

    $('.social_bar').animate({right: '-20px'},800);
    $(this).removeClass('opened');
    $(this).addClass('closed');

  });

但不明白我做错了什么..从逻辑上讲，这应该是可行的..

Answer 1

您在运行时更改类，但仅在加载时附加事件。要使事件处理程序对类更改使用react，您需要委托(delegate)它们，如下所示:

$(document).on('click', '.closed', function(){
  $('.social_bar').animate({ right: "20px" }, 800);
  $(this).toggleClass('opened closed');
}).on('click', '.opened', function() {
  $('.social_bar').animate({ right: '-20px' }, 800);
  $(this).toggleClass('opened closed');
});

.social_bar {
  height: 100px;
  width: 100px;
  background: red;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="closed">click</button>
<div class="social_bar">

</div>