> 웹 프론트엔드 > JS 튜토리얼 > jQuery_jquery에서 전환() 함수를 사용하는 예

jQuery_jquery에서 전환() 함수를 사용하는 예

WBOY
풀어 주다: 2016-05-16 16:03:29
원래의
1262명이 탐색했습니다.

오늘 흥미로운 사례를 접하고 기록해봤습니다.

1단계 메뉴에는 내부에 2단계 메뉴가 있습니다. 2단계 메뉴는 앵커 포인트를 통해 페이지 요소를 연결합니다. 원하는 효과는 앵커를 클릭하면 페이지가 해당 앵커로 연결되고, 1차 메뉴를 다시 클릭하면 실행이 계속되는 것입니다. .

여러 가지 방법을 시도해 보았지만 결국에는 jquery의 토글 기능을 읽고 깨달았습니다.

    //这样写可以
    $(".nav").toggle(function(){
      $(".content").slideToggle();
    });
    //这样写不可以
    $(".nav").toggle(function(){
     $(".content").slideDown();
   },function(){
     $(".content").slideUp();
   });
   //这样写也可以
    $(".nav").click(function(){
      $(".content").toggle("slow");
    });

로그인 후 복사

toggle() 사용 지침이 첨부되어 있습니다.

토글(fn,fn)

클릭할 때마다 호출할 함수를 전환합니다.
일치하는 요소를 클릭하면 지정된 첫 번째 기능이 트리거되고 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 트리거됩니다. 이후 클릭할 때마다 이 두 함수에 대한 호출이 차례로 반복됩니다.

바인딩 해제("클릭")를 사용하여 삭제할 수 있습니다.

반환값
jQuery

매개변수

fn(함수) : 홀수번째 클릭이 되었을 때 실행되는 함수입니다.

fn(함수) : 짝수 클릭시 실행되는 함수입니다.


수업을 테이블로 전환

jQuery 코드:

$("td").toggle( 
function () { 
$(this).addClass("selected"); 
}, 
function () { 
$(this).removeClass("selected"); 
} 
);

로그인 후 복사

추가: 토글은 클릭할 때만 작동하고, 호버는 마우스가 안팎으로 움직일 때 발생하는 이벤트일 뿐이며 클릭과는 아무 관련이 없습니다. 둘 다 함께 사용할 수 있습니다

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿