클릭하면 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

당신이 다른 클릭 이벤트 처리기를 추가하는 것을 클릭하고 때마다. 너는 어떤 것도 제거하지 않고있다. 이렇게 할 수 있습니다 :

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