Jquery의 $ ('# 요소'). 두 번째 시간 이후에 켜기/끄기가 작동하지 않습니다.

Question

다음 jQuery 코드가 있습니다. (내 첫 번째 수제 jQuery 코드이므로 너무 열심히하지 마십시오 :)).

• 나는 우측 토글을 클릭, #content 이동과 왼쪽 토글이 나타납니다 Eveything 내가 토글을 사용하여 처음으로 완벽하게 작동합니다.
• 왼쪽 토글을 클릭하면 #content가 뒤로 이동하고 오른쪽 토글이 나타납니다. (모든 것은 시작 위치로 돌아 간다).

하지만 그 후에는 내 오른쪽 전환을 더 이상 클릭 할 수 없습니다 (그래도 나타납니다). 나는 같은 것을 반복해서하고 싶다. (클릭 토글, #content move etc. 등). 하지만 현재 코드로는이 애니메이션을 한 번만 할 수 있습니다.

누구든지 나를 도울 수 있습니까 :)? 사전 :

//starting values 
    $(".rowToggleL").off('click');  
    $(".rowToggleR").on('click'); 

    //Right Toggle 
    $(".rowToggleR").click(function() { 

     // make Toggle Right unclickable, make Toggle Left clickable 
     $(".rowToggleR").off('click'); 
     $(".rowToggleL").on('click'); 


     //animate contentbox 
     $("#content").animate({ 
      left: "-=300" // animate to the right 
     }, 800, 

     // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
     function() { 
      $(".rowToggleR").css("display", "none"); 
      $(".rowToggleL").css("display", "inline"); 
     }); 


    }); 

    //Left Toggle 
    $(".rowToggleL").click(function() { 

     // make Toggle Left unclickable, make Toggle Right clickable 
     $(".rowToggleL").off('click');  
     $(".rowToggleR").on('click'); 

    //animate contentbox 
     $("#content").animate({ 
      left: "+=300" // animate to the right 
     }, 800, 

     // Animation complete. Make Toggle Left invisible, make Toggle Right visible. 
     function() { 
      $(".rowToggleL").css("display", "none"); 

      $(".rowToggleR").css("display", "inline"); 
     }); 

    }); 

Answer 1

에서

덕분에 당신은 불필요한 코드를 많이 가지고있다. 온/오프가 필요하지 않습니다. 또한 jquery에는 숨기기 및 표시 기능이 있습니다. 이 작업을해야합니다 :

//Right Toggle 
$(".rowToggleR").click(function() { 
    //animate contentbox 
    $("#content").animate({ 
     left: "-=300" // animate to the right 
    }, 800, 
      // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
        function() { 
         $(".rowToggleR").hide(); 
         $(".rowToggleL").show(); 
        }); 


     }); 

//Left Toggle 
$(".rowToggleL").click(function() { 
    //animate contentbox 
    $("#content").animate({ 
     left: "+=300" // animate to the right 
    }, 800, 
      // Animation complete. Make Toggle Left invisible, make Toggle Right visible. 
        function() { 
         $(".rowToggleL").hide(); 
         $(".rowToggleR").show(); 
        }); 

     }); 

Answer 2

jQuery의 켜기 및 끄기가 이전에 설정된 처리기에 대한 토글이 아니기 때문에!

on()을 호출하면 이벤트에 처리기 (함수)를 추가합니다. 그러나 off()으로 전화하면 모두 처리기가 이벤트에 첨부됩니다.

는 on('click')를 호출 할 때, 당신은 당신이 이전에 설정 한 핸들러를 활성화하지 않습니다

$(".rowToggleR").click(function() {}); // Which equals $(".rowToggleR").on('click', function() {}); 

을하지만 그 대신, 당신이 그것을 클릭 할 때 호출하는 다른 기능을 추가 할 수 있습니다.