it-swarm.com.de

Bootstrap 3 Collapse Change Chevron-Symbol beim Klicken

Ich habe alle verwandten Fragen zu meiner Frage gelesen und sie alle erfolglos ausprobiert. Ich kann meinen Code nicht zum Laufen bringen, obwohl ich denke, dass fast jeder Code, den ich geschrieben habe, mit den auf dieser Website veröffentlichten Lösungen identisch ist. 

Hier ist der HTML-Code:

<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">
  ...

Hier ist die 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');
  }

Ich möchte nur das Symbol von unten nach oben ändern, wenn das Element minimiert wird. Dann schalten Sie zurück, wenn dieselbe Klasse angeklickt wird ... Ich bin wirklich bei dieser Klasse. Danke im Voraus!

22
Dominic

Das Problem besteht darin, dass Ihr jQuery-Code nicht korrekt ist.

Sie schließen die Event-Handler-Funktion frühzeitig in dieser Zeile:

$('#serviceList').on('shown.bs.collapse'), function() {

Sehen Sie diese zweite schließende Klammer? Das schließt die Einschaltfunktion frühzeitig. Versuchen Sie, Ihre jQuery folgendermaßen zu ändern:

$('#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

Reines CSS.

HTML-Teil:

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

Das Schlüsselelement ist hier aria-extended = "false" oder "true".

CSS:

a[aria-expanded=true] .fa-chevron-right {
   display: none;
}
a[aria-expanded=false] .fa-chevron-down {
   display: none;
}

Versuchen Sie diese elegantere Lösung:

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

Ähnlich wie Bojans Antwort verwende ich diese Lösung.
Ändern Sie den HTML-Code folgendermaßen:

<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>

Es ist besser, das .on-Ereignis in Bezug auf .click zu verwenden. Auch mit dem Class Selector kann es als standortweite Lösung verwendet werden.

$('.chevron_toggleable').on('click', function() {
    $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
12
trante

Ich möchte eine Option in der gleichen Weise anbieten wie eine andere hier veröffentlichte Lösung, aber ich verwende nur ein div mit Transformationen.

`a [aria-extended = true] .fa-chevron-right { umwandeln: drehen (0 Grad); }

a [aria-extended = false] .fa-chevron-right { verwandeln: drehen (90 Grad); // oder welche Richtung auch immer Sie brauchen } `

2
Michael Buchok

sie können es versuchen.

Hier ist der HTML-Code:

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

Hier ist die 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

Die einfachste Antwort, die ich finden konnte, und ich dachte, es wäre nützlich, hier für andere hinzuzufügen.

Im Wesentlichen handelte es sich dabei um ein bisschen css

/* Rotating glyphicon when expanding/collapsing */
.collapse-chevron .glyphicon {
  transition: .3s transform ease-in-out;
}
.collapse-chevron .collapsed .glyphicon {
  transform: rotate(-90deg);
}

was auf dieses bisschen HTML zutraf

<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 des Codes: https://codepen.io/anon/pen/PKxzVa

Quelle: dieser Artikel

Weitere Beispiele finden Sie im Codepen des Artikels: https://codepen.io/disjfa/pen/EZdMpe

2
Inti

problem behoben, bei dem HTML/CSS geändert wurde

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

Ich habe das Symbol zum Ändern des Zusammenbruchs in Bootstrap 4 mit minimaler HTML-Änderung vorgenommen

  • Zu css hinzufügen:

    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');
    }
    
  • Setzen Sie die Schriftarten an der richtigen Stelle, bezogen auf 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
    
  • Und fügen Sie class="collapsed" zu allen eingeblendeten (standardmäßig) Links hinzu:

    <a href="#info" data-toggle="collapse" class="collapsed">Collapsed link</a>
    <div id="info" class="collapse">
    
0
GKislin

wenn Sie eckigejs verwenden, können Sie dies versuchen. 

.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";
}

letzten umschalten oder Vergleich durchführen

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