1

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

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

我目前的代码是：

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/

4

1 回答 1

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/

于 2013-07-31T20:51:30.777 回答