클릭시 토글 만들기

Question

jQuery를 사용하여 링크를 클릭하면 그 내용이 화면 오른쪽에서 0px로 제공됩니다. 그런 다음 다시 클릭하면 종결 토글 효과가 닫힙니다.

나의 현재 jQuery를은 다음과 같습니다

$('.bet-slip-outer').click(function() { 
    // Responsive Stuff... 
    var windowwidth = $(window).width(); 

    $('.bet-slip').animate({ 
     'right': '-240px' 
    }); 
}, function() { 
    $('.bet-slip').animate({ 
     'right': '0px' 
    }); 
}); 

그러나 나는 right:-240 단지 우선 것 같다 .bet-slip을 클릭합니다.

내가 뭘 잘못하고 있니?

건배 조건과

Answer 1

변수를 사용하여 요소가 아직 클릭되었는지 확인하십시오.

toggle = "on"; 
$('.bet-slip-outer').click(function() { 
    // Responsive Stuff... 
    var windowwidth = $(window).width(); 
    if(toggle == "on"){ 
     $('.bet-slip').animate({ 
      'right': '0px' 
     }); 
     toggle = "off"; 
    }else{ 
     $('.bet-slip').animate({ 
      'right': '-240px' 
     }); 
    } 
}); 

Answer 2

는 :

이 어울리는 스타일을 정의합니다.

<div class="bet-slip" style="right:0px;"></div> 

JQuery와

$('button').click(function() { 
    if($('.bet-slip').css('right') === '0px'){ 
     $('.bet-slip').animate({'right':'-240px'}); 
    } else { 
     $('.bet-slip').animate({'right':'0px'}); 
    } 
}); 

다른

에만 스타일 :

$('button').click(function(){ 
 
    $('div').toggleClass('right'); 
 
});

div{ 
 
\t position:relative; 
 
\t width:100px; 
 
\t height:10px; 
 
\t background:green; 
 
\t right:-100px; 
 
\t transition:1s; 
 
} 
 
.right{ 
 
\t right:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    
 
</div> 
 
<button> 
 
    f 
 
</button>

Answer 3

는 공식 문서에 따르면, .click() method은 하나의 핸들러를 사용할 수 있습니다. 그 목적을 위해 두 개의 다른 핸들러를 선언 할 수는 없습니다. 자신의 jQuery 데이터 요소의 토글 상태는

읽기 객체

• 스토어 : - 그 두 가지 해결책이 있습니다 하나는 CSS에 애니메이션을 위임하고, 대신 .toggleClass()를 사용하거나 상태 코드를 사용하는 것입니다 데이터 객체 존재 또는 0하지 않는 경우가 존재 1 경우, 다른 일을 할, 당신은 물론 바이너리 조건을 수정할 수 있습니다

(조건 2) 뭔가 (조건 1)

을 1, 2 달성하고자하는 효과로

또한 빠른 클릭/토글 링으로 인한 불규칙한 애니메이션을 방지하려면 더 많은 애니메이션을 대기열에 보내기 전에 애니메이션을 중지해야합니다. 이것은 .stop(true, true)을 오브젝트에 연결하여 수행됩니다.

$(function() { 
 
    $('.bet-slip-outer').click(function() { 
 
    // Check state 
 
    if(!$(this).data('toggle') || $(this).data('toggle') == 0) { 
 
     $(this).data('toggle', 1); 
 
     $('.bet-slip').stop(true, true).animate({ 
 
     'right': '-240px' 
 
     }); 
 
    } else { 
 
     $(this).data('toggle', 0); 
 
     $('.bet-slip').stop(true, true).animate({ 
 
     'right': '0' 
 
     }); 
 
    } 
 
    }); 
 
});

.bet-slip { 
 
    position: relative; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bet-slip-outer"> 
 
    <div class="bet-slip">bet-slip</div> 
 
</div>

Answer 4

은 매우 JS 스타일 변수를 하딩은 코딩!

당신은 같은 것을 할 수있는 : 당신이 할 것입니다 귀하의 CSS에 다음

$(".bet-slip-outer .bet-slip").toggleClass("animation"); 

:

.bet-slip-outer .bet-slip { right: 0px;} 
    .animation { right: -240px;} 

왜 다른 사람을 통해이 옵션을 사용할 수 있습니까?

• 귀하의 하드 스크립트가 아닌 STYLE 변수가 CSS에 남겨 두었습니다. 하드 코딩을 유지하면 프로젝트가 성장함에 따라 결국 JS 코드베이스가 '냄새'가됩니다. IE : 나는 길을 바꾸기 위해 고통 스럽다!