關於點擊 - jQuery事件問題

Question

我試圖創建函數，點擊按鈕後，將打開我的搜索框，並再次點擊這個相同的按鈕後，它會關閉它。

我建立這個：

$("#searchbutton").click(function(){ 
     $("#searchBox").animate({top: '0px'}, 500), 

     $(this).click(function(){ 
     $("#searchBox").animate({top: '-47px'}, 500) 
      }); 
     }); 

它工作正常，但只有第一次後，我點擊它。然後如果我再次點擊它重新打開而不刷新頁面按鈕會自動隱藏。

爲什麼會發生？

感謝您的幫助提前

大教堂

Answer 1

你的問題是，你永遠不會解除綁定的第一次點擊處理程序。

最好的解決辦法是使用toggle處理程序，就像這樣：

$("#searchbutton").toggle(
    function() { $("#searchBox").animate({top: '0px'}, 500); }, 
    function() { $("#searchBox").animate({top: '-47px'}, 500); } 
); 

Answer 2

每次你點擊您要添加另一個click事件處理程序的時間。你沒有刪除任何。你可以這樣做：

$("#searchbutton").click(show_search); 

function show_search() { 
    $("#searchBox").animate({top: '0px'}, 500)}); 
    $("#searchbutton").unbind("click", show_search).click(hide_search); 
} 

function hide_search() { 
    $("#searchBox").animate({top: '-47px'}, 500)}); 
    $("#searchbutton").unbind("click", hide_search).click(show_search); 
} 

但添加/刪除事件處理程序有點醜。幸運的是，這裏有一個更簡單的解決方案：

$("#searchbutton").click(function() { 
    $("#searchbutton").slideToggle(); 
});