Exemple de bascule jQuery pour afficher et masquer le contenu
The requirement: nous devons afficher un contenu réductible lorsque nous avons cliqué sur le bouton "Afficher" et masquer le contenu réductible lorsque nous avons cliqué sur le bouton "Masquer".
The solution: fonction jQuerytoggle().
Démo: clique sur le bouton «afficher».
1. Contenu réductible
Voici un exemple de code HTML pour le contenu réductible:
Use jQuery toggle to hide/show collapse content
L'élément «div» dans les<div id="collapse1" style="display:none"> ci-dessus est masqué. Afin d'afficher le contenu lorsque nous avons cliqué sur le bouton "Afficher", nous devons créer un événement de clic pour le bouton "Afficher" comme ci-dessous:
$('.nav-toggle').click(function(){
//logic to show/hide collapsable content
});
2. Obtenez le sélecteur
Obtenez le sélecteur de contenu réduit à partir de l'attribut href:
var collapse_content_selector = $(this).attr('href');
3. Basculer pour afficher et masquer
Utilise la bascule jQuery pour afficher / masquer le contenu réductible comme ci-dessous:
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button label to be 'Show'
}else{
toggle_switch.html('Hide');//change the button label to be 'Hide'
}
});
4. Exemple complet
jQuery toggle to display and hide content
jQuery toggle() to hide/show collapse content
Télécharger le code source
Téléchargez-le -jQuery-toggle-to-display-hide-content.zip (1kb)