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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

由于您在点击时动态分配了类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 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();
   };
});

我错过了什么？在这个代码上

3 个答案: