>  기사  >  웹 프론트엔드  >  매우 실용적인 jQuery 토글() 메소드

매우 실용적인 jQuery 토글() 메소드

巴扎黑
巴扎黑원래의
2017-06-29 10:51:051153검색

다른 배경색 전환:

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

정의 및 사용법

toggle() 메서드는 선택한 요소의 클릭 이벤트에 대한 응답으로 두 개 이상의 이벤트 핸들러함수를 차례로 바인딩하는 데 사용됩니다.

이 메서드는 선택한 요소의 hide() 및 show() 메서드를 전환하는 데에도 사용할 수 있습니다.

두 개 이상의 기능을 Toggle 이벤트에 바인딩

지정된 요소를 클릭하면 두 개 이상의 기능 사이를 차례로 전환합니다.

함수를 세 개 이상 지정하면 전환() 메서드가 모든 기능을 전환합니다. 예를 들어 함수가 세 개 있는 경우 첫 번째 클릭은 첫 번째 함수를 호출하고, 두 번째 클릭은 두 번째 함수를 호출하고, 세 번째 클릭은 세 번째 함수를 호출합니다. 네 번째 클릭은 첫 번째 함수를 다시 호출하는 방식입니다.

Syntax

$(selector).toggle(function1(),function2(),functionN(),...)

직접 시도해 보세요

ParametersDescription필수입니다. 요소를 클릭할 때마다 짝수번 클릭할 때마다 함수가 실행되도록 지정합니다. 필수입니다. 요소를 홀수번 클릭할 때마다 실행할 함수를 지정합니다. 선택 사항. 전환해야 하는 다른 기능을 지정합니다.
function1()
function2()
functionN(),...

Hide() 및 Show() 전환

각 요소가 표시되는지 확인하세요.

요소가 숨겨져 있으면 show()를 실행하세요. 요소가 표시되면 요소 hide()입니다. 이는 전환 효과를 생성합니다.

Syntax

$(selector).toggle(speed,callback)

직접 시도해 보세요

ParametersDescriptionspeed콜백
선택 사항입니다. 숨기기/표시 효과의 속도를 지정합니다. 기본값은 "0"입니다.

가능한 값:

  • 밀리초(예: 1500)

  • "slow"

  • "normal"

  • "fast"

선택사항. Toggle() 메서드가 완료되면 실행되는 함수입니다.

콜백에 대해 자세히 알아보려면 콜백 기능 튜토리얼을 방문하세요.

요소 표시 또는 숨기기

일치하는 모든 요소만 표시하거나 숨길지 여부를 지정합니다.

Syntax

$(selector).toggle(switch)

직접 시도해 보세요

ParametersDescription
switch 필수입니다. 토글()이 선택한 모든 요소만 표시할지 아니면 숨길지 지정하는 부울 값입니다.

  • true - 요소 표시

  • false - 요소 숨기기

위 내용은 매우 실용적인 jQuery 토글() 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.