J'ai lu toutes les questions relatives à ma question et les ai toutes essayées sans succès. Je n'arrive pas à faire fonctionner mon code, même si je "pense" que presque tous les codes que j'ai écrits étaient les mêmes avec les solutions publiées sur ce site.
Voici le code HTML:
<div class="press-title">
<p class="text" data-toggle="collapse" data-target="#serviceList">
<span id="servicesButton" data-toggle="tooltip " data-original-title="Click Me!">
<span class="servicedrop glyphicon glyphicon-chevron-down"></span> Services Offered <span class="servicedrop glyphicon glyphicon-chevron-down"></span>
</span>
</p>
</div>
<div id="serviceList" class="collapse">
<div class="row featurette">
...
Voici le JQuery
$('#serviceList').on('shown.bs.collapse'), function() {
$(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
$('#serviceList').on('hidden.bs.collapse'), function() {
$(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
}
Je veux juste changer l'icône de bas en haut, lors de la réduction de l'élément. Puis basculez en arrière quand la même classe est cliquée . Je suis vraiment coincé avec celui-ci. Merci d'avance!
Le problème est que votre code jQuery n'est pas correct.
Vous fermez tôt la fonction de gestionnaire d'événements sur cette ligne:
$('#serviceList').on('shown.bs.collapse'), function() {
Voir cette deuxième parenthèse de fermeture? Cela ferme la fonction 'on' tôt. Essayez de changer votre jQuery pour ressembler à ceci:
$('#serviceList').on('shown.bs.collapse', function() {
$(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
});
$('#serviceList').on('hidden.bs.collapse', function() {
$(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
});
CSS pur.
Partie HTML:
<a data-toggle="collapse" href="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Open/Close collapse
<i class="fa fa-chevron-right pull-right"></i>
<i class="fa fa-chevron-down pull-right"></i>
</a>
L'élément clé ici est aria-expand = "false" ou "true"
CSS:
a[aria-expanded=true] .fa-chevron-right {
display: none;
}
a[aria-expanded=false] .fa-chevron-down {
display: none;
}
Essayez cette solution plus élégante:
$('#serviceList').click(function(){
$(this).find('.servicedrop').toggleClass('icon-chevron-down icon-chevron-up');
});
Semblable à la réponse de Bojan, j'utilise cette solution.
Changer le code HTML comme ceci:
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
Il est préférable d'utiliser l'événement .on
en ce qui concerne .click
. De plus, en utilisant le sélecteur de classe, il peut être utilisé comme solution globale au site.
$('.chevron_toggleable').on('click', function() {
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
J'aimerais proposer une option allant dans le même sens qu'une autre solution publiée ici, mais utilisant une seule div avec des transformations.
`a [aria-expand = true] .fa-chevron-right { transformer: faire pivoter (0deg); }
a [aria-expand = false] .fa-chevron-right { transformer: faire pivoter (90 °); // ou quelle que soit la direction dont vous avez besoin } `
vous pouvez essayer cela.
Voici le code HTML:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Collapsible Group Item #1<span class="glyphicon glyphicon-chevron-up"></span> </a>
Voici le JQuery
$('#accordion').on('shown.bs.collapse hidden.bs.collapse', function (e) {
$(e.target).prev('.panel-heading').find("span.glyphicon").toggleClass('glyphicon-chevron-up glyphicon-chevron-down',200, "easeOutSine" );
});
La réponse la plus simple que je pouvais trouver et pensait qu'il serait utile d'ajouter ici pour les autres.
Essentiellement, cela impliquait ce css
/* Rotating glyphicon when expanding/collapsing */
.collapse-chevron .glyphicon {
transition: .3s transform ease-in-out;
}
.collapse-chevron .collapsed .glyphicon {
transform: rotate(-90deg);
}
qui s'appliquait à ce bit de HTML
<div class="collapse-chevron">
<a data-toggle="collapse" class="collapsed" href="#collapseFilter">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<strong>link to toggle</strong>
</a>
<div class="collapse" id="collapseFilter">
<p>Some content I want collapsed or expanded</p>
</div>
</div>
Code de code: https://codepen.io/anon/pen/PKxzVa
Source: cet article
Voir le codepen de l'article pour d'autres exemples: https://codepen.io/disjfa/pen/EZdMpe
correction du problème lors de la modification de HTML/CSS
HTML:
<a data-toggle="collapse" href="#doc" class="yt-toggle collapsed">View Doc
<i class="fa fa-caret-right fa-fw"></i>
<i class="fa fa-caret-down fa-fw"></i>
</a>
CSS:
.yt-toggle.collapsed .fa-caret-down {
display: none;
}
.yt-toggle.collapsed .fa-caret-right {
display: inline-block;
}
.yt-toggle .fa-caret-right {
display: none;
}
Pour changer l’icône de réduction dans Bootstrap 4 avec un minimum de modification html, j’ai fait
Ajouter au css:
a[data-toggle="collapse"]:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: #4285F4;
}
a[data-toggle="collapse"].collapsed:after {
content: "\e080";
}
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Mettez les polices à la bonne place, en lien avec css:
\css\style.css
\fonts\glyphicons-halflings-regular.eot
\fonts\glyphicons-halflings-regular.svg
\fonts\glyphicons-halflings-regular.ttf
\fonts\glyphicons-halflings-regular.woff
\fonts\glyphicons-halflings-regular.woff2
Et ajoutez class="collapsed"
à tous les liens réduits (par défaut):
<a href="#info" data-toggle="collapse" class="collapsed">Collapsed link</a>
<div id="info" class="collapse">
si vous utilisez angularjs, vous pouvez essayer ceci.
.html
<button ng-click="enlarge(x.ID)" class="{{fullglyphon[x.ID]}}" ng-init="fullglyphon[x.ID] = 'btn btn-xs btn-primary glyphicon glyphicon-resize-full'"></button>
.js
$scope.enlarge = function(myID) {
$scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-small";
}
basculer en dernier ou faire si comparaison
if ( $scope.fullglyphon[myID] == "btn btn-xs btn-primary glyphicon glyphicon-resize-small" ) {
$scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-full";
}else{
$scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-small";
}