jQuery 在点击时删除自己的类

Question

奇怪的问题:

我正在创建一个简单的 CSS3 动画滑出面板。动画是使用 jQuery 触发的。我有两个版本，一个有效，一个无效。

FIDDLE to the working version.

功能失调版本的代码:

$('.mark').click(function () {
    $('.box').addClass('box-up');
    $('.box').removeClass('box-down');
    $(this).addClass('active');
    $(this).removeClass('inactive');
});
$('.active').click(function () {
    $('.box').addClass('box-down');
    $('.box').removeClass('box-up');
    $(this).addClass('inactive');
    $(this).removeClass('active');
});

这是我想要工作的 jQuery，不幸的是它没有。第二个版本的预期结果是允许用户单击 <div class="mark"></div>打开和关闭滑出面板。

我做错了什么？任何帮助将不胜感激。

Answer 1

jQuery 将在页面加载时绑定(bind)事件。它不会主动寻找元素来绑定(bind)事件。因此，在您的示例中，当页面加载时，jQuery 将查找 $('.active') 但不会找到任何内容。

相反，您可以将一个点击事件绑定(bind)到 $('.mark') 并使用 if 语句检查它是否处于事件状态。

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

  // check if mark is inactive
  if($(this).hasClass('inactive'){
    $('.box').addClass('box-up');
    $('.box').removeClass('box-down');
    $(this).addClass('active');
    $(this).removeClass('inactive');
  }

  // check if mark is active
  else if($(this).hasClass('active'){
    $('.box').addClass('box-down');
    $('.box').removeClass('box-up');
    $(this).addClass('inactive');
    $(this).removeClass('active');
  }

});

如果您想主动绑定(bind)事件，请考虑使用 .on()使用 .active 选择器。

$('.box').on('click', '.active', function () { /* code here */ });

旁注:

我认为同时拥有上/下和事件/非事件状态是多余的。您可以关闭没有类的元素并添加一个打开的类，反之亦然。