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/

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

1 个答案: