jQuery在单击时删除自己的类

奇怪的问题：

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

功能失调版本的代码：

$('.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，不幸的是它没有。第二个版本的预期结果是允许用户单击

打开并关闭滑出面板

---

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

jQuery将在页面加载时绑定事件。它不会主动寻找要将事件绑定到的元素。因此，在您的示例中，当页面加载时，jQuery将查找

$（'.active'）

，但找不到

相反，您可以做的是将单击事件绑定到

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

});

如果要主动绑定事件，请考虑使用选择器

.active

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

旁注：

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

试试这个。

忽略下面的内容
该死的…我需要30个chracter来发布…
jfiddle-link需要在注释中附加代码

//code goes here

---

我几乎认为这可能是问题所在，尽管我没有语言（或技术知识）来描述它。谢谢你的帮助！没问题@sdny。我只是添加了更多信息，以防你想主动绑定事件。你说得对。我不需要两个州。我想第一个版本从来都不是最优雅的版本。我以前没有用过.on（），但现在我会研究一下。太好了！非常感谢你。