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/