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

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

情况是，我有一个搜索按钮，当单击该按钮时，切换搜索输入的可见性。我想能够切换搜索关闭再次点击按钮，但也当搜索输入焦点模糊

我目前的代码是：

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

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

---

这里有一个提琴：

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

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

---

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

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

---

fiddle将有帮助我的坏，这里：fiddle将有帮助我的坏，这里：这是完美的，搜索按钮兄弟姐妹也应该在切换功能中，但这正是我需要的。我已经想出了一个有效的解决方案，但你的更干净！谢谢这很完美，搜索按钮也应该在切换功能中，但这正是我需要的。我已经想出了一个有效的解决方案，但你的更干净！非常感谢。