1

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>
4

2 回答 2

3

因为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-downto 。hasClassexpander-up

于 2013-06-23T18:28:35.457 回答
1

问题在于.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>
于 2013-06-23T18:29:19.057 回答