web-dev-qa-db-fra.com

Bootstrap 3 collapse changer d'icône en chevron au clic

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!

jquerytwitter-bootstraptwitter-bootstrap-3
22
Dominic

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');
  });
23
royse41

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;
}
76
Ростислав Кирчев

Essayez cette solution plus élégante:

$('#serviceList').click(function(){
    $(this).find('.servicedrop').toggleClass('icon-chevron-down icon-chevron-up');
});
21
user1202826

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');
});
12
trante

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 } `

2
Michael Buchok

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" );
});
2
Red Web

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

2
Inti

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;
}
1
Mukesh

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">
0
GKislin

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";
                }
0
Tower Jimmy