오늘 흥미로운 사례를 접하고 기록해봤습니다.
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"); } );
추가: 토글은 클릭할 때만 작동하고, 호버는 마우스가 안팎으로 움직일 때 발생하는 이벤트일 뿐이며 클릭과는 아무 관련이 없습니다. 둘 다 함께 사용할 수 있습니다