jQuery에서 토글 및 호버 사용에 대한 자세한 설명

이 글은 jQuery의 hover와 Toggle 기능의 사용법과 예시를 소개하는 데 중점을 두고 있습니다. 매우 간단하고 실용적이어서 친구들에게 참고용으로 추천합니다.

jQuery는 두 개의 events효과를 병합하는 몇 가지 메소드(예: mouseover, mouseout, keydown 등)를 제공합니다.

1 hover 기능

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

<script type="text/
javascript
">
$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next().show();// 鼠标悬浮时触发
    },function(){
        $(this).next().hide();// 鼠标离开时触发
    })
})
</script>

2. 토글 기능

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

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show();// 第一次点击时触发
    },function(){
        $(this).next().hide();// 第二次点击时触发，之后不停的切换
    })
})
</script>

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

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

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().toggle();
    },function(){
         $(this).next().toggle();
    })
})
/*$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().toggle();
    })
})*/
</script>

CSS 스타일을 추가할 수도 있습니다:

<style type="text/css">
.highlight{ 
background
:#FF3300; }
</style>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){//配合css样式使用
        $(this).addClass("highlight");
        $(this).next().show();
    },function(){
        $(this).removeClass("highlight");
        $(this).next().hide();
    });
})
</script>

위 내용은 jQuery에서 토글 및 호버 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!