为什么我的带有事件处理程序的addClass removeClass不能像预期的那样工作？

Question

jQuery版本1.6

目标:当用户单击向下箭头(expander-down)时，显示高级区域。与wise一样，当用户单击上箭头(expander-up)时，隐藏高级区域。

问题:我认为用下面的代码实现很简单。单击expander-up后，高级搜索区域将如预期的那样显示，但是当我单击expander-down时，什么都不会发生。

FYI，我使用图像分割技术通过添加/删除类来交换箭头的外观(扩展-向下，扩展-向上)。

javascript:

$(".expander-down").unbind("click").click(function ()
{
   $(this).addClass("expander-up").removeClass("expander-down");
   $("#advanced-search").show();
});

$(".expander-up").unbind("click").click(function ()
{
   $(this).addClass("expander-down").removeClass("expander-up");
   $("#advanced-search").hide();
});

<a href='#'>
  <span class='expander-down'></span>
</a>

<div id='advanced-search'>advanced!</div>

Answer 1

因为分配给click处理程序的元素从未更改过。即使当用户单击一个扩展程序时，您也会将相同的处理程序(向下或向上)留在其上。

我会像这样重构它：

$(".expander-down, .expander-up").click(function() {
    var $this = $(this);
    $this.toggleClass("expander-down expander-up");
    $("#advanced-search").toggle($this.hasClass("expander-down"));
    return false; // Stops propagation and prevents default action
});

它通过切换向下/向上状态来响应单击，然后根据结果状态显示/隐藏搜索框。我认为您的代码是在扩展程序关闭时显示出来的，所以这就是我上面所做的，但这对我来说没有什么意义。如果我误读，只需将hasClass中的hasClass更改为expander-up即可。

Answer 2

问题在于页面负载上不存在.expander-up，这意味着事件永远不会绑定到您的span中。

取消绑定所有单击函数根本不是必要的。此外，还可以将两个函数合并为一个函数：

$(".expander").click(function(e) {
   e.preventDefault(); // This avoids unwanted scrolling effect
   $(this).toggleClass("expander-up expander-down");
   $("#advanced-search").toggle();
});

如果还没有设置css类，toggleClass会将它添加到元素中，如果已经设置了类，则将其移除。除了元素可见性外，toggle也会这样做。

您的html应该如下所示：

<a href='#'>
  <span class='expander expander-down'></span>
</a>

<div id='advanced-search'>advanced!</div>