JQuery toggle 사용 분석

오늘 중점 은 toggle(fn,fn,....)함수 입 니 다.주로 특정한 사건 의 교대 작업 을 전환 하 는 데 사 용 됩 니 다.예 를 들 어 한 버튼 의 클릭 이벤트 와 하나의 DIV 배경 에 대해 한 번 의 단 추 를 누 르 면 DIV 배경 을 파란색 으로 표시 하고 두 번 째 를 누 르 면 DIV 배경 색 을 검은색 으로 바 꿔 야 합 니 다.우리 가 정의 하 는 HTML 코드 는 다음 과 같 습 니 다.가 정의 하 는 최초의 스타일 은 다음 과 같 습 니 다

 
#DivToggle { 
height: 150px; 
width: 200px; 
margin: 50px; 
background-color: #6CC; 
} 

toggle(fn,fn,..);선 명 백 toggle()의 함 수 는 주로 요소 의 디 스 플레이 상 태 를 전환 하 는 데 사 용 됩 니 다.하나의 요소 가 표시 된다 면.toggle()을 호출 하면 숨겨 집 니 다.JQuery 코드:

 
<script type="text/javascript"> 
$( 
function() { 
$("#btnShow").click(function(event) { 
$("#DivToggle").toggle(); 
}); 
} 
); 
</script> 

버튼 을 누 른 후 DIV 를 숨 기 고 다시 DIV 를 누 르 면 표 시 됩 니 다.그리고 순환 합 니 다.요소 의 표시 와 숨 김 을 수 동 으로 설정 할 수 있 습 니 다.표시:toggle(true);숨 기기:토글(false);요소 의 숨 김 과 표시 속 도 를 설정 할 수 있 습 니 다.$("\#")DivToggle").toggle(600); 물론 여기 서 우 리 는 우리 가 웹 페이지 에서 자주 만 나 는 마 우 스 를 위로 옮 겨 표시 한 후에 마 우 스 를 옮 기 면 숨겨 지 는 효 과 를 생각 할 수 있다.여기 에는 당연히 hover(fnover,fnout)사건 이 사용 되 었 다.우 리 는 fnover 와 fnout 을 이상 의 toggle(600)로 설정 하면 됩 니 다.여기 fnover 는 마우스 로 이동 하 는 이벤트 함수 이 고 fnout 은 마우스 로 이동 하 는 이벤트 함수 입 니 다.우 리 는 toggle(600)을 하나의 함수 로 따로 설정 하여 호출 할 것 입 니 다.이렇게 하면 비교적 읽 기 쉬 워 보 입 니 다

 
<script type="text/javascript"> 
$( 

function(event) { 
$("#btnShow").hover(OverOut, OverOut); 
function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 
} 
); 
</script> 

이렇게 해서 우 리 는 마 우 스 를 버튼 위로 이동 한 후에 옮 기 면 DivToggle 의 숨 김 과 표시 효 과 를 볼 수 있 습 니 다.toggle(fn,fn,...)을 보 여주 기 위해 서 는 위 에 있 는 함 수 를 사용 한 다음 btnShow 를 사용 한 Click 이 벤트 를 추가 하여 DIV 를 표시 하 는 스타일 을 숨 긴 다음 이 표 의 DIV 스타일 을 추가 합 니 다.숨겨 진 코드 를 표시 하면 이렇게 할 수 있 습 니 다.갑자기 뭔 가 휘 저어 진 것 같 아.꽈배기 처럼.소 와 소 가 설명 할 수 있 기 를 바 랍 니 다.이렇게 해서 toggle 의 순환 함수 효 과 를 보 여주 기 위해 서 는 방법 이 없습니다.단 추 를 누 르 면 Div 의 스타일 을 바 꿀 수 있 습 니 다.DIV 스타일 을 바 꾸 는 코드 는 다음 과 같 습 니 다.상세 한 코드 는 다음 과 같다.