Question

我正在尝试创建功能，单击按钮后，将打开我的搜索框，再次单击此按钮后，它将关闭它。

我已经建立了这个：

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

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

它工作正常，但仅在我点击后第一次。然后，如果我再次点击它重新打开而不刷新页面按钮将自动隐藏。

为什么会这样？

提前感谢您的帮助

的Dom

Answer 1

您的问题是您永远不会取消绑定第一个单击处理程序。

最好的解决方案是使用toggle处理程序，如下所示：

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

Answer 2

每次点击时，您都会添加另一个点击事件处理程序。你没有删除任何。你可以这样做：

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

点击 - jQuery事件问题

2 个答案: