JQuery：将来自多个元素的多个触发器绑定到一个事件

Question

我一直在互联网上寻找解决方案，但我发现的只是多个元素/事件/触发器的细微变化，而不是这个特定问题。

情况是我有一个搜索按钮，单击该按钮会切换搜索输入的可见性。我希望能够通过单击按钮以及在搜索输入焦点模糊时再次关闭搜索。

我当前的代码是：

function toggleSearch() {
$("#search").animate({
        width: "toggle",
        opacity: "toggle"
    }, "slow",function() { $(this).focus(); });
$("#searchButton").parent('li').siblings().animate({
        width: "toggle",
        opacity: "toggle"
    }, "slow");
}

$("#searchButton").click(toggleSearch);
$("#search").blur(toggleSearch);

这里的问题是，如果您单击按钮以再次关闭搜索，它也算作输入模糊，因此会触发该功能两次，然后搜索关闭并重新打开。所以基本上我需要一些可以做到这一点的东西：

$("#searchButton").click() or $("#search").blur() {
    toggleSearch();
}

我还想将按钮的功能从打开/关闭切换到提交搜索，具体取决于搜索输入中是否有值。但从我的经验来看，我不确定使用哪种语法会起作用。

这是一个小提琴：http://jsfiddle.net/hGgc9/

Answer 1

您可以使用以下命令检查动画当前是否正在运行：

function toggleSearch() {
    if (!$("#search").is(":animated")) {
        $("#search").animate({
                width: "toggle",
                opacity: "toggle"
            }, "slow",function() { $(this).focus(); });
    }
}

$("#searchButton").parent('li').siblings().animate({
     width: "toggle",
     opacity: "toggle"
}, "slow");

$("#searchButton").click(toggleSearch);
$("#search").blur(toggleSearch);

http://jsfiddle.net/hGgc9/3/