En utilisant l'exemple de base tiré de la page d'exemples Javascript Bootstrap 3 pour Collapse , j'ai pu montrer l'état de réduction à l'aide d'icônes en chevron.
J'ai ce travail en utilisant:
$('#accordion .accordion-toggle').click(function (e) {
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});Cela fonctionne (pas entièrement testé dans tous les navigateurs), mais je me demande s'il existe une solution plus élégante à cela?
Idéalement, j'aimerais utiliser la fonction principale, mais je ne sais pas comment obtenir les mêmes résultats avec elle.
$('#accordion').on('hidden.bs.collapse', function () {
//do something...
})Voici une version fonctionnelle de jsfiddle .
jquery
css
twitter-bootstrap
twitter-bootstrap-3
Ryan Scott
la source
la source
Réponses:
Pour le HTML suivant (à partir d' exemples Bootstrap 3 ):
Effet visuel:
la source
Vous pouvez utiliser ce type de code:
=> Travail JsFiddle
la source
$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);$('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);placePour améliorer la réponse avec le plus de hausses, certains d'entre vous ont peut-être remarqué lors du chargement initial de la page que les chevrons pointent tous dans la même direction. Ceci est corrigé en ajoutant la classe "collapsed" aux éléments que vous souhaitez charger réduits.
Voici un violon fonctionnel: http://jsfiddle.net/3gYa3/585/
la source
Amélioration de la réponse de Bludream:
Vous pouvez certainement utiliser FontAwesome!
Assurez-vous d'inclure la classe "réduit" avec la classe "titre de panneau". La classe "réduit" n'est pas incluse tant que vous n'avez pas cliqué sur le panneau pour que vous souhaitiez inclure la classe "réduit" afin d'afficher le chevron correct (c'est-à-dire que le chevron-droit est affiché lorsqu'il est réduit et le chevron-bas lorsqu'il est ouvert).
HTML
CSS
En outre, il est recommandé de créer une nouvelle classe au lieu d'utiliser une classe existante.
Voir Codepen par exemple: http://codepen.io/anon/pen/PPxOJX
la source
Merci aux biggates et aux steakpi. En réponse à la question Dreamonic, j'ai apporté quelques modifications pour rendre tous les en-têtes cliquables (pas seulement la chaîne de titre et les gluphes) et j'ai enlevé le soulignement du lien. Pour forcer une icône à apparaître sur la même ligne, j'ai ajouté h4 à la fin des instructions CSS. Voici le code modifié:
Et le CSS modifié:
la source
Voici quelques classes d'assistance css pures qui vous permettent de gérer tout type de contenu à bascule directement dans votre html.
Cela fonctionne avec n'importe quel élément que vous devez changer. Quelle que soit votre disposition, vous la placez simplement dans quelques éléments avec les classes .if-collapsed et .if-not-collapsed dans l'élément toggle.
Le seul problème est que vous devez vous assurer de mettre l'état initial souhaité de la bascule. S'il est initialement fermé, placez une classe réduite sur la bascule.
Il nécessite également le : pas de sélecteur, cela ne fonctionne pas sur IE8.
Exemple HTML:
Moins de version:
Version CSS:
la source
Je sais que c'est vieux mais puisque nous sommes maintenant en 2018, je pensais que je répondrais en améliorant les choses en simplifiant le code et en améliorant l'expérience utilisateur en faisant pivoter le chevron en fonction de l'effondrement ou non. J'utilise FontAwesome cependant. Voici le CSS:
Voici le code HTML de la section panneau:
J'utilise bootstraps pull-right pour tirer le chevron tout le chemin vers la droite de l'en-tête du panneau qui doit être pleine largeur et réactif. Le CSS effectue tout le travail d'animation et fait pivoter le chevron en fonction de si le panneau est réduit ou non. Facile.
la source
exemple simple de travail
entrer simple
HTML :
JavaScript
la source
ou ... vous pouvez simplement mettre un style comme celui-ci.
http://codepen.io/anon/pen/GJjrQN
la source
J'utilise une police géniale ! et voulait qu'un panneau soit pliable
et le css
la source
Angular semble causer des problèmes avec les approches basées sur JavaScript ici (du moins celles que j'ai essayées). J'ai trouvé cette solution ici: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . L'essentiel est d'utiliser
data-ng-clickle bouton bascule et de créer la méthode pour changer le bouton dans le contrôleur en utilisant le$scopecontexte.Je suppose que je pourrais fournir plus de détails ... mes boutons sont définis sur le glyphicon de l'état initial de la div qu'ils réduisent (glyphicon-chevron-right == collapsed div).
page.html:
controllers.js:
la source
Bon mot.
Dans cet exemple, il est utilisé pour regrouper des lignes de table réductibles. La seule chose que vous devez faire est d'ajouter le nom de la classe cible (my-collapse-name) à votre icône:
Vous pouvez accomplir la même chose avec la classe caret native de Bootstrap en utilisant
<span class='caret my-collapse-name'></span>etspan.caret.collapse.in { transform: rotate(90deg); }la source
Si vous essayez de l'utiliser uniquement avec des panneaux (pas avec l'accordéon), essayez ce code:
la source
Je voulais une approche purement html car je voulais réduire et étendre le html qui a été ajouté à la volée via un modèle! Je suis venu avec ça ...
https://jsfiddle.net/3mguht2y/1/
Ce qui pourrait être utile à quelqu'un :)
la source