jquery 무한 애니메이션 문제

Question

정말 간단한 메뉴를 만들고 싶습니다. div "test"가 숨겨져 있고 div "trig"를 클릭하면 테스트가 표시됩니다. 그런 다음 다시 삼각 관계를 클릭하면 테스트가 숨겨집니다. 처음 클릭 할 때 작동하고, 다시 trig을 클릭하면 애니메이션이 2 번 재생되고, 다시 클릭하면 3 번 재생됩니다.

내 코드는 다음과 같습니다

<div class="trig">trig</div> 
<div class="test">test</div> 

<script src="jquery.js"></script> 
<script> 
$(function() { 

$('.test').hide(); 

function bis() { 
    $('.trig').click(function() { 
     var trig = $(this); 
     var test = trig.next(); 
     test.show(300,function() { 
      trig.click(function(){ 
       test.hide(300, function() { bis(); }) 
      ;}); 
     ;}); 
    }); 
}; 

bis(); 

}); 
</script> 

Answer 1

테스트를 보여주고, 그 후에는 트리거를 클릭하면 그 후, 먼저 $('.trig').click(function()가 호출되기 때문에 단지 한 번 작업 귀하의 기능도 show의 콜백에있는 trig.click(function()이 호출되면 테스트가 즉시 다시 숨겨집니다.

요소를 전환하려면 toggle() 함수를 사용하십시오.

$('.trig').click(function() { 
    var trig = $(this); 
    var test = trig.next(); 
    test.toggle(300); 
}); 

문서 : http://api.jquery.com/toggle/

바이올린 : http://jsfiddle.net/suEg4/

Answer 2

이것은 간단한 일이 ... 그것은 작동합니다 ... 아래와 같이 시도 ...이다

바이올린 예 : http://jsfiddle.net/RYh7U/103/

$('.test').toggle(); 
$('.trig').click(function() { 
    $('.test').toggle("slow"); 
});