JQuery 토글 사용 분석_jquery

오늘은 특정 이벤트의 회전 동작을 전환하는 데 주로 사용되는 토글(fn, fn,….) 함수에 중점을 둡니다.
예: 버튼 클릭 이벤트 및 DIV 배경의 경우 버튼을 한 번 클릭하면 DIV 배경이 파란색으로 표시됩니다. 두 번째 클릭 시 DIV의
배경색을 검정색으로 변경합니다.
우리가 정의한 HTML 코드는 다음과 같습니다:

=" DivToggle">ID "DivToggle"의 내용은 여기에 표시됩니다

정의된 초기 스타일은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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

toggle(fn,fn,….); 주로 요소 표시 상태를 전환하는 데 사용됩니다. 요소가 표시되면 .toggle()을 호출한 후 숨겨집니다.

JQuery 코드:

코드 복사 코드는 다음과 같습니다.

버튼을 클릭한 후 DIV가 숨겨지고, 다시 DIV를 표시한 다음 반복합니다.
여기에서 요소 표시 및 숨기기를 수동으로 설정할 수 있습니다. display: 전환(true); hide: 전환(false)

또한 요소 숨기기 및 표시 속도를 설정할 수 있습니다. 강요.

$("#DivToggle").toggle(600);


물론 이 시점에서 우리는 웹 페이지에서 자주 접하는 내용을 생각해 볼 수 있습니다. 표시한 다음 마우스를 멀리 이동하면 효과가 숨겨집니다.

여기서는 물론 hover(fnover,fnout) 이벤트가 사용됩니다. 위의 토글(600)에 fnover와 fnout만 설정하면 됩니다.

여기서 fnover는 마우스가 위로 움직일 때의 이벤트 함수이고, fnout은 마우스가 멀어질 때의 이벤트 함수입니다.

토글(600)을 호출할 별도의 함수로 설정하여 읽기 쉽도록 했습니다.

코드 복사 코드는 다음과 같습니다.

이런 식으로 마우스를 버튼을 누른 후 켜면 DivToggle의 숨김 및 표시 효과를 볼 수 있습니다.
토글(fn, fn,...)의 회전 동작을 보여주기 위해 위 함수를 사용한 다음 btnShow를 사용하여 Click 이벤트를 추가하여 먼저 DIV를 숨기고 표시한 다음 테이블 DIV의 스타일.

다음과 같이 숨겨진 코드를 표시할 수 있습니다(사실 이 코드는 문제가 있지만 이렇게 작성하면 원하는 효과를 얻을 수 있습니다).

코드를 복사하세요 코드는 다음과 같습니다:

이 코드를 되돌아보면 토글(fn,fn,…) 자체가 Click 이벤트를 추가하는 데 사용되는 것 같습니다. 그런 다음 이 요소에 대한 토글
의 함수를 반복합니다. 갑자기 나는 약간 혼란스러운 느낌이 들었습니다. 트위스트처럼. Niuniu가 그것을 설명할 수 있기를 바랍니다.
토글 라운드 로빈 기능의 효과를 보여주기 위해 버튼을 클릭하여 Div의 스타일을 변경할 수 있는 방법은 없습니다.
DIV 스타일을 변경하는 코드는 다음과 같습니다.



코드를 복사하세요.

코드는 다음과 같습니다. $( function(event) {

function OverOut(event) {

$("#DivToggle") .toggle(600);
}
$("#DivToggle").toggle(function() {
$(this).click(function() { $(this).css("배경 ", "파란색"); } );
}, function(event) {
$(this).click(function() { $(this).css("배경", "녹색"); });
}) ;
}
)


이 시점에서 위의 효과를 얻으려면 이벤트를 버튼, 즉 "btnShow"에 직접 로드해야 한다는 생각이 문득 떠 올랐습니다. 이는 먼저 디스플레이를 숨긴 다음 DIV의 스타일을 변경한다는 의미입니다. 자세한 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(
function(event) {

function OverOut(event) {
$("#DivToggle").toggle(600) ;
}

$("#btnShow").toggle(
OverOut, OverOut,
function() { $("#DivToggle").css({ "배경": "녹색" }) },
function() { $("#DivToggle").css({ "배경": "파란색" }) }

}
);

이렇게 하면 위에서 원하는 효과를 얻을 수 있습니다. 즉, 먼저 숨긴 다음 표시하고 스타일을 변경합니다.