javascript - 为什么带有事件处理程序的addClass removeClass不能按预期工作？

jQuery版本1.6

目标：当用户单击向下箭头（expander-down）时，显示高级区域。同样，当用户单击上方的箭头（expander-up）时，隐藏高级区域。

问题：
我认为使用以下代码很容易实现。单击expander-up后，将按预期显示高级搜索区域，但是当我单击expander-down时，没有任何反应。

仅供参考，我使用图像拆分技术通过添加/删除类（向下扩展器，向上扩展器）交换箭头外观。

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

的HTML

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

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

最佳答案

因为分配给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
});

该响应通过切换向下/向上状态来响应单击，然后基于结果状态显示/隐藏搜索框。我认为在扩展器关闭时您的代码正在显示它，所以这就是我在上面所做的事情，但这对我来说没有任何意义。如果我读错了，只需将expander-down中的hasClass更改为expander-up。