腳本只運行一次

Question

當我按下菜單按鈕時，我正在嘗試制作一個從左側打開和關閉的側邊菜單。 得到了css，html代碼正常運行，但我無法弄清楚我對腳本做錯了什么。 它只能完美地工作一次：當我按下菜單按鈕它出來時，再次按下它然后按照預期返回。 問題是，如果我再次按它顯示它，它會自動返回。 誰能幫我？ 這是我的腳本：

$(document).ready(function(){

$('.menu-icon').click(function(){
    $('#navigator').animate({left:'0px'},200);
    $(this).animate({left:'250px'},200);
    $('.menu-icon').click(function(){
        >$('#navigator').animate({left:'-250px'},200);
        >$(this).animate({left:'0px'},200);
}); 
});
>});

Answer 1

您已在單擊處理程序中放置了一個單擊處理程序，因此它將多次運行。 先是兩次，然后是三次，然后是四次等。

您需要有一個處理程序，並根據元素的當前狀態決定如何設置動畫。 例如以下內容（未經測試）：

$(document).ready(function () {

    $('.menu-icon').click(function () {
        if ($('#navigator').css("left") != "0px") {
            $('#navigator').animate({
                left: '0px'
            }, 200);
            $(this).animate({
                left: '250px'
            }, 200);
        } else {
            $('#navigator').animate({
                left: '-250px'
            }, 200); > $(this).animate({
                left: '0px'
            }, 200);
        }
    });
});

我建議使用你在元素上切換的類測試“當前狀態”，因為測試css值在動畫期間是眾所周知的不可靠。

例如：

    if ($('#navigator').toggleClass("open").hasClass("open")) {

Answer 2

在這里，您將附加click事件偵聽器兩次。 一個正常，一個點擊后，這就是為什么它發生使用jquery切換

或以這種方式使用

$(document).ready(function(){

   $('.menu-icon').click(function(){
     var navigator = $('#navigator');
     if(navigator.offset().left == 0)
     {
        navigator.animate({left:'-250px'},200);
        $(this).animate({left:'0px'},200);
     }
     else
     {
        navigator.animate({left:'0px'},200);
        $(this).animate({left:'250px'},200);
     }

  });
});