Question

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>

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

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

Answer 2

问题在于页面加载中不存在.expander-up，这意味着事件不会被绑定到你的范围。

根本不需要解除所有点击功能的绑定。此外，您可以将两个函数合并为一个：

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

toggleClass将css类添加到元素中（如果尚未设置），如果已设置，则删除该类。 toggle执行相同但元素可见性。

你的HTML应该是：

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

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

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

2 个答案: