Maison > interface Web > tutoriel CSS > Comment puis-je utiliser les glyphicons Bootstrap pour indiquer dynamiquement l'état du panneau pliable ?

Comment puis-je utiliser les glyphicons Bootstrap pour indiquer dynamiquement l'état du panneau pliable ?

Susan Sarandon
Libérer: 2024-12-12 11:03:14
original
598 Les gens l'ont consulté

How Can I Use Bootstrap Glyphicons to Dynamically Indicate Collapsible Panel State?

Utilisation des glyphicons Bootstrap pour indiquer l'état d'effondrement

La documentation Bootstrap 3 pour Collapse fournit un exemple qui utilise CSS pour afficher des icônes en chevron pour indiquer l'état de l'effondrement. état des panneaux pliables. Cette solution, cependant, peut ne pas fonctionner parfaitement sur tous les navigateurs.

Une solution plus élégante

Pour créer une solution plus élégante, nous pouvons utiliser les données Bootstrap 3- attribut toggle pour mettre à jour dynamiquement les classes Glyphicon en fonction de l'état d'effondrement :

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="panel-group">
Copier après la connexion
$('.accordion-toggle').on('click', function (e) {
    var chevron = $(e.target).children('i.glyphicon');
    chevron.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
Copier après la connexion

Cette solution utilise jQuery pour basculer la classe Chevron lorsque l'effondrement est déclenché. La classe glyphicon-chevron-down est ajoutée lorsque le panneau est ouvert, tandis que la classe glyphicon-chevron-up est ajoutée lorsque le panneau est réduit. Cela fournit une indication dynamique et réactive de l’état d’effondrement.

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal