Comment utiliser jquery pour afficher des éléments en cliquant dessus puis en cliquant à nouveau sur les éléments cachés-js tutoriel-php.cn

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

7196 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