Bootstrap 3 S'effondrer afficher L'état avec L'icône de Chevron
en utilisant l'exemple de base tiré du Bootstrap 3 Javascript page d'exemples pour Collapse , J'ai pu montrer l'état d'effondrement en utilisant des icônes 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 y a une solution plus élégante à cela?
Idéalement, j'aimerais utiliser la fonction de base, mais je ne suis pas sûr de savoir comment obtenir les mêmes résultats avec elle.
$('#accordion').on('hidden.bs.collapse', function () {
//do something...
})
Voici une version de travail dans jsfiddle .
14 réponses
pour le HTML suivant (de Bootstrap 3 exemples ):
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}<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" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>effet visuel:
vous pouvez utiliser ce genre de code:
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
= > Working JsFiddle
pour améliorer la réponse avec les plus upticks, certains d'entre vous ont peut-être remarqué sur la charge initiale de la page que les chevrons tous pointent dans la même direction. Ceci est corrigé en ajoutant la classe "collapsé" aux éléments que vous voulez charger s'est effondré.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
voici un violon de travail: http://jsfiddle.net/3gYa3/585 /
merci à biggates et steakpi. En réponse à la question Dreamonic, j'ai fait quelques changements pour rendre tous les en-têtes cliquables (pas seulement la chaîne de titre et gluphs) 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é:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
et le CSS modifié:
.panel-heading .accordion-toggle h4:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
/* symbol for "collapsed" panels */
content: "\e080";
}
a.accordion-toggle{
text-decoration: none;
}
amélioration de la réponse de Bludream:
vous pouvez certainement utiliser FontAwesome!
assurez-vous d'inclure la classe" collapsed "ainsi que la classe" panel-heading". La classe" affaissé "n'est pas incluse tant que vous n'avez pas cliqué sur le panneau, donc vous voulez inclure la classe" affaissé " afin d'afficher le chevron correct (i.e., chevron-right est affiché quand affaissé et chevron-down quand ouvert).
HTML
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
<div class="collapse" id="collapseOrderItems1">
<p>Lorem ipsum...</p>
</div>
</div>
CSS
.panel-heading .chevron:after {
content: "\f078";
}
.panel-heading.collapsed .chevron:after {
content: "\f054";
}
Aussi, c'est une bonne pratique pour créer une nouvelle classe au lieu d'utiliser une classe existante.
voir Codepen par exemple: http://codepen.io/anon/pen/PPxOJX
voici quelques classes d'aide CSS pures qui vous permettent de gérer n'importe quel type de contenu à bascule directement dans votre html.
il fonctionne avec n'importe quel élément que vous devez changer. Quelle que soit votre disposition est vous venez de le mettre à l'intérieur d'un couple d'éléments avec le .si écroulée et .si-non-les classes se sont effondrées dans l'élément de bascule.
le seul hic est que vous devez vous assurer que vous mettez l'état initial désiré de la bascule. Si c'est d'abord fermé, puis mettre une classe s'est effondré sur la bascule.
il nécessite également le sélecteur : pas , il ne fonctionne pas sur IE8.
exemple HTML:
<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
<!--You can put any valid html inside these!-->
<span class="if-collapsed">Open</span>
<span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
version moins:
[data-toggle="collapse"] {
&.collapsed .if-not-collapsed {
display: none;
}
&:not(.collapsed) .if-collapsed {
display: none;
}
}
CSS version:
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
exemple simple de travail
- obtenir le corps de l'état montré/caché
- faire à ses parents att
- obtenir icône
- changer d'icône
HTML :
<body>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
</div>
<div id="jai" class="accordion-body collapse in">
<div>
<div class="accordion-inner">body content 1</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div>
<div class="accordion-inner">body content 2</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
</div>
<div id="collapse3" class="accordion-body collapse">
<div>
<div class="accordion-inner">body content 3</div>
</div>
</div>
</div>
</body>
JavaScript
$('div.accordion-body').on('shown', function () {
$(this).parent("div").find(".icon-chevron-down")
.removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('div.accordion-body').on('hidden', function () {
$(this).parent("div").find(".icon-chevron-up")
.removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
ou... tu peux mettre un style comme ça.
.panel-title a.collapsed {
background: url(../img/arrow_right.png) center right no-repeat;
}
.panel-title a {
background: url(../img/arrow_down.png) center right no-repeat;
}
j'utilise font awesome ! et voulait qu'un panneau soit pliable
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>
<div class="collapse in" id="collapseOrderItems">
....
</div>
</div>
et le css
.panel-heading .fa-chevron:after {
content: "\f078";
}
.panel-heading.collapsed .fa-chevron:after {
content: "\f054";
}
Angular semble causer des problèmes avec les approches basées sur JavaScript ici (au 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-click sur le bouton à bascule et de faire la méthode pour changer le bouton dans le contrôleur en utilisant le contexte $scope .
je pense que je pourrais fournir plus de détails... mon les boutons sont positionnés sur le glyphicon de l'état initial de la div ils s'effondrent (glyphicon-chevron-droite == div effondrée ) .
de la page.html:
<div class="title-1">
<button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel-{{ p_idx }}" class="collapse sect">
...
</div>
contrôleurs.js:
.controller('PageController', function($scope, $rootScope) {
$scope.collapse = function (event) {
$(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
};
)
si vous essayez d'utiliser ceci avec des panneaux seulement (pas accordeon), essayez ce code:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
</h4>
</div>
<div id="collapseExample" class="panel-collapse collapse in">
<div class="panel-body">
Panel content
</div>
</div>
</div>
One-liner.
i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }
dans cet exemple, il est utilisé pour grouper des lignes de table pliables. La seule chose que vous devez faire est d'ajouter le nom de classe cible (ma-effondrement-nom) de votre icône:
<tr data-toggle="collapse" data-target=".my-collapse-name">
<th><i class="fa fa-chevron-right my-collapse-name"></span></th>
<th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
<td></td>
<td>Detail Row - Content</td>
</tr>
vous pourriez accomplir la même chose avec la classe native caret de Bootstrap en utilisant <span class='caret my-collapse-name'></span> et span.caret.collapse.in { transform: rotate(90deg); }
je sais que c'est ancien mais puisque c'est maintenant 2018, j'ai pensé que je répondrais en le rendant meilleur en simplifiant le code et en améliorant l'expérience utilisateur en faisant tourner le chevron basé sur effondré ou non. J'utilise cependant FontAwesome. Voici la CSS:
a[data-toggle="collapse"] .rotate {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
voici le HTML pour la section panel:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
<i class="fa fa-chevron-right pull-right rotate"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
j'utilise les bootstraps pull-right pour tirer le chevron jusqu'à la droite du cap du panneau qui doit être plein la largeur et la réactivité. Le CSS fait tout le travail d'animation et fait tourner le chevron en fonction de si le panneau est effondré ou non. Simple.
je voulais une approche purement html car je voulais m'effondrer et étendre html qui a été ajouté à la volée via un modèle! Je suis venu avec cette...
https://jsfiddle.net/3mguht2y/1 /
var noJavascript = ":)";
Qui pourrait être utile à quelqu'un :)