jQuery에서 호버 메소드와 토글 메소드를 사용하는 방법

jQuery는 프론트엔드 개발에 널리 사용되며 이에 대한 지식 포인트가 많이 있습니다. 오늘은 jQuery에서 hover 메소드와 토글 메소드를 사용하는 방법, I을 알려드리겠습니다. jQuery를 배우고 있어요 친구 여러분, 와서 살펴보세요.

jQuery는 두 가지 이벤트 효과(예: mouseover, mouseout, keydown 등)를 병합하는 몇 가지 메서드(예: 토글)를 제공합니다.

1, 호버 기능

hover(over,out) 호버 이벤트(마우스가 개체 위로 또는 개체 밖으로 이동)를 시뮬레이션하는 메서드입니다. 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.
Parameters:
over (함수): 요소 위로 마우스를 이동할 때 트리거되는 함수입니다.
out(함수): 마우스가 요소 밖으로 이동할 때 트리거되는 함수입니다.

코드는 다음과 같습니다:

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

2. 토글 기능

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

코드는 다음과 같습니다:

<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의 일반적인 hover 이벤트와 토글 이벤트에 대해 새롭게 이해하셨나요? 이 글이 도움이 되길 바랍니다.

위 내용은 jQuery에서 호버 메소드와 토글 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!