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

Comment utiliser jquery pour afficher des éléments en cliquant dessus puis en cliquant à nouveau sur les éléments cachés

WBOY
Libérer: 2021-11-22 16:31:53
original
7173 Les gens l'ont consulté

Méthode : 1. Utilisez la méthode click() pour lier l'événement click au bouton et spécifiez la fonction de traitement ; 2. Utilisez les instructions if, show() et hide() dans la fonction pour implémenter la syntaxe "if( element object.is(' :hidden')){element object.show();}else{element object.hide();}".

Comment utiliser jquery pour afficher des éléments en cliquant dessus puis en cliquant à nouveau sur les éléments cachés

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.0, ordinateur Dell G3.

Comment jquery réalise cliquer pour afficher des éléments et cliquer à nouveau pour masquer des éléments

Dans jquery, vous pouvez utiliser la méthode show() et la méthode hide() pour réaliser en cliquant sur le bouton pour l'afficher et en cliquant à nouveau dessus pour masquez-le. Si la méthode hide() est sélectionnée. Si l'élément est déjà affiché, masquez-le. La syntaxe est : méthode

$(selector).hide(speed,callback)
Copier après la connexion

show(). Si les éléments sélectionnés ont été masqués, ces éléments sont affichés. La syntaxe est :

$(selector).show(speed,callback)
Copier après la connexion

Prenons un exemple pour voir comment implémenter l'affichage au niveau du comté et cliquez à nouveau sur masquer. . L'exemple est le suivant :

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<style type="text/css">
div{width:100px;
height:100px;
background: red;
}
</style>
<div id="test"></div>
<button id="anniu">显示与隐藏</button>
<script>
$(function(){
$(&#39;#anniu&#39;).click(function(){//点击按钮
if($(&#39;#test&#39;).is(&#39;:hidden&#39;)){//如果当前隐藏
$(&#39;#test&#39;).show();//点击显示
}else{//否则
$(&#39;#test&#39;).hide();//点击隐藏
}
})
})
</script>
</body>
</html>
Copier après la connexion

Résultats de sortie :

Comment utiliser jquery pour afficher des éléments en cliquant dessus puis en cliquant à nouveau sur les éléments cachés

 Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery

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