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

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

当此 JavaScript 为运行时，您的代码将 click 事件绑定到 DOM 中存在的元素。

由于您是在单击时动态分配 class opened 和 closed，因此您需要使用 .on 在元素上绑定适当的事件。

试试下面的代码：

$(document).on('click', '.closed', function(){

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

});

$(document).on('click', '.opened', function(){

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

});

Answer 2

您在运行时更改 classes，但您仅在加载时附加事件。要使事件处理程序对 class 更改做出反应，您需要委托它们，如下所示：

$(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>

Answer 3

最好做一个变量来判断面板是打开还是关闭。

var pressed = false;
function show = {...};//here you can provide addClass and removeClass and don't forget to set pressed = true;



function hide = {...};//the same here + pressed = false;
$(your target).on("click", function(){
   if(!pressed){ //if not pressed then show
    show(); 
   } else {
    hide();
   };
});

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

What i'm missing? On this code

jquery

jquery-animate