Explication détaillée sur l'utilisation du basculement et du survol dans jQuery

Cet article se concentre sur vous présenter les méthodes d'utilisation et les exemples des deux fonctions survoler et basculer dans jQuery C'est très simple et pratique, et est recommandé aux amis pour référence.

jQuery fournit certaines méthodes (telles que : toggle) pour combiner les effets de deux événements ensemble, telles que : mouseover, mouseout ; keyup, keydown, etc.

1. Fonction de survol

hover(over,out) Une méthode qui simule un événement de survol (la souris se déplace sur un objet et sort de cet 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.

<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 clic. 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. Vous pouvez utiliser unbind("click") pour supprimer. La méthode

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

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

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

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!