jQuery_jquery의 hover 메소드와 Toggle 메소드 사용 안내

jQuery는 mouseover, mouseout, keydown 등과 같은 두 가지 이벤트 효과를 병합하는 몇 가지 메서드(예: 토글)를 제공합니다.

1. 호버 기능

hover(over,out) 호버 이벤트(마우스가 개체 위로 이동하여 개체 밖으로 이동)를 시뮬레이션하는 메서드입니다. 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다. 매개변수: Over(기능): 마우스가 요소 위로 이동할 때 트리거되는 기능입니다. out(함수): 마우스가 요소 밖으로 이동할 때 트리거되는 함수입니다.

코드 복사 코드는 다음과 같습니다. $(함수(){ $("#panel h5.head").hover(function(){ $(this).next().show();// 마우스를 호버링할 때 트리거됨 },함수(){ $(this).next().hide();// 마우스가 떠날 때 트리거됨 }) })

2. 토글 기능

토글(fn,fn)은 클릭할 때마다 호출되는 함수를 전환합니다. 일치하는 요소를 클릭하면 지정된 첫 번째 기능이 트리거되고 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 트리거됩니다. 이후 클릭할 때마다 이 두 함수에 대한 호출이 차례로 반복됩니다. unbind("클릭")을 사용하여 삭제할 수 있습니다.

코드 복사 코드는 다음과 같습니다. $(함수(){ $("#panel h5.head").toggle(function(){ $(this).next().show();// 처음 클릭했을 때 트리거됨 },함수(){ $(this).next().hide();// 두 번째 클릭 시 트리거된 후 계속 전환됩니다 }) })

toggle() 메서드는 요소의 표시 상태를 전환합니다. 선택한 요소가 표시되면 숨기고, 선택한 요소가 숨겨져 있으면 표시합니다. Toggle() 메서드는 요소의 표시 상태를 전환합니다. 선택한 요소가 표시되면 숨기고, 선택한 요소가 숨겨져 있으면 표시합니다.

위 코드는 다음과 같이 작성할 수도 있습니다.

코드 복사 코드는 다음과 같습니다. $(함수(){ $("#panel h5.head").toggle(function(){ $(this).next().toggle(); },함수(){ $(this).next().toggle(); }) }) /*$(함수(){ $("#panel h5.head").click(function(){ $(this).next().toggle(); }) })*/

몇 가지 CSS 스타일을 추가할 수도 있습니다.

코드 복사 코드는 다음과 같습니다. .highlight{ 배경:#FF3300 } $(함수(){ $("#panel h5.head").toggle(function(){//CSS 스타일과 함께 사용 $(this).addClass("highlight"); $(this).next().show(); },함수(){ $(this).removeClass("highlight"); $(this).next().hide(); }); })

jQuery의 일반적인 호버 이벤트와 토글 이벤트에 대해 새롭게 이해하셨나요? 이 기사가 도움이 되기를 바랍니다.