Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser la bascule dans jquery

coldplay.xixi
Libérer: 2020-12-17 14:36:47
original
6150 Les gens l'ont consulté

Comment utiliser toggle dans jquery : 1. Liez deux fonctions ou plus dans l'événement click de l'élément, et oggle lui-même est déclenché par un clic ; 2. Réalisez les effets d'affichage et de masquage des éléments de commutation.

Comment utiliser la bascule dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.2.1, cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : Tutoriel vidéo jquery

Comment utiliser la bascule dans jquery :

1 Cliquez sur l'événement sur l'élément Lier. deux fonctions ou plus dans toggle. Contrairement à bind, toggle doit ajouter « clic » à la fin pour lier l'événement déclencheur de clic lui-même est déclenché par clic (et ne peut être déclenché que par clic), comme le montre l'exemple suivant :

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>
<script type="text/javascript">
    $(function () {
        $("#btntest")
            $("#btntest").toggle(
            function(){
                $("div").html("我变了!");
            },
            function(){
                $("div").html("我又变了!");
            });
        });
</script>
Copier après la connexion

2. Changer l'affichage et masquer les effets des éléments :

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>
<script type="text/javascript">
    $(function () {
        $("#btntest").bind("click",function(){
            $("div").toggle(500);//此处的 500 是隐藏显示的延迟时间,默认为0,也可以用"slow","normal"或"fast"
                                 //如果里面的值为true(toggle(true))时只能显示元素,值为false(toggle(false))时只能隐藏元素。
) }) }); </script>
Copier après la connexion

Recommandations d'apprentissage associées : Tutoriel vidéo js

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal