Comment utiliser la méthode hover et la méthode toggle dans jQuery

jQuery est largement utilisé dans le développement front-end, et il existe de nombreux points de connaissances à ce sujet. Aujourd'hui, je vais vous expliquer, Comment utiliser la méthode hover et la méthode toggle dans jQuery, Pour ceux qui le sont. apprendre jQuery, venez jeter un oeil.

jQuery fournit certaines méthodes (telles que : bascule) pour fusionner deux effets d'événement, tels que : survol de la souris, sortie de la souris ; touche enfoncée, touche enfoncée, etc.

Fonction de survol <.>

hover(over,out) Une méthode qui simule des événements de survol (la souris se déplace sur et hors d'un objet). Il s'agit d'une méthode personnalisée qui fournit un état « conserver » pour les tâches fréquemment utilisées.

Paramètres :
over (Fonction) : La fonction à déclencher lorsque la souris passe sur l'élément.
out (Fonction) : La fonction à déclencher lorsque la souris sort de l'élément.

Le code est le suivant :

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

2. basculer la fonction

toggle(fn,fn) change la fonction à appeler chaque fois où on clique dessus. Si un élément correspondant est cliqué, la première fonction spécifiée est déclenchée, et lorsque le même élément est cliqué à nouveau, la deuxième fonction spécifiée est déclenchée. Chaque clic suivant répète tour à tour l’appel à ces deux fonctions. Peut être supprimé en utilisant unbind("click").

Le code est le suivant :

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

La méthode toggle() change l'état visible de l'élément.

Masquer les éléments sélectionnés s'ils sont visibles et les afficher si les éléments sélectionnés sont masqués. La méthode toggle() change l'état visible d'un élément.
Masquer les éléments sélectionnés s'ils sont visibles et les afficher si les éléments sélectionnés sont masqués.

Le code ci-dessus peut donc également être écrit comme :

Le code est le suivant :

<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>

Vous pouvez également ajouter quelques styles CSS :

Le code est le suivant :

<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>

Avez-vous acquis une nouvelle compréhension des événements de survol courants et des événements de bascule dans jQuery ? J'espère que cet article pourra vous apporter de l'aide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!