Bootstrap 3 Collapse Show Status mit Chevron-Symbol

126

Anhand des Kernbeispiels aus der Javascript- Beispielseite von Bootstrap 3 für Collapse konnte ich den Status des Collaps mithilfe von Chevron-Symbolen anzeigen.

Ich habe diese Arbeit mit:

$('#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");
});

Dies funktioniert (nicht in allen Browsern vollständig getestet), aber ich frage mich, ob es dafür eine elegantere Lösung gibt.

Idealerweise möchte ich die Kernfunktion verwenden, bin mir aber nicht sicher, wie ich damit die gleichen Ergebnisse erzielen kann.

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})

Hier ist eine Arbeitsversion in jsfiddle .

Ryan Scott
quelle
Hallo, in diesem Beispiel, wie mache ich die gesamte Überschrift zu einem Hyperlink anstatt nur zum Text. Mit anderen Worten, wenn ich auf das Überschriftenfeld klicke, nicht nur auf den Text, möchte ich zum Umschalten anzeigen. wie mache ich das?
user1447718
@ user1447718 Hier ist eine Geige, die genau das tut: JSFiddle Ich wollte, dass der gesamte Header auch anklickbar ist, also habe ich einige Lösungen kombiniert, die ich in SO gefunden habe (einschließlich dieser).
Pieter VDE
Ähnlich wie bei Dperish habe ich das gemacht
Steve Greene

Antworten:

241

Für den folgenden HTML- Code (aus Bootstrap 3-Beispielen ):

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

Visueller Effekt:

Bootstrap3 Chevron-Symbol auf Akkordeon

Biggates
quelle
6
Das funktioniert gut ... hier ist eine jsFiddle für dich: jsfiddle.net/panchroma/3gYa3
David Taiaroa
6
In der Geige zeigen alle Chevrons zunächst nach unten. Gibt es eine einfache Lösung dafür?
wuher
16
Ich sehe keine reine CSS-Lösung für den Ausgangszustand. Das Problem hierbei ist, dass Bootstrap die Klasse "reduziert" nicht zum Link hinzufügt, bis Sie mindestens eine reduzieren (selbst wenn alle zum Start reduziert sind). Dann wird diese Klasse einfach aus dem Link für "Öffnen" entfernt. Da "open" und "default" dieselbe Klasse haben, gibt es keine gute reine CSS-Lösung. Im Idealfall wird dies behoben, indem das Javascript von Bootstrap geändert wird, um eine "offene" Klasse zur Unterscheidung hinzuzufügen. Bis dahin leben Sie damit oder verwenden Sie JS aus einer der anderen Antworten.
Carl Bussema
56
Ich weiß, dass dies ein alter Beitrag ist, aber um Carls Problem zu beantworten - wenn Sie die Klasse "kollabiert" auf allen Ankertags mit "Akkordeon-Toggle" hinzufügen, verschwinden Ihre Probleme ... Also ist "Akkordeon-Toggle" kollabiert ". JQuery fügt dann die Klassen hinzu und entfernt sie, wenn dies erforderlich ist.
Steakpi
5
Ich habe dieses Beispiel so geändert, dass der gesamte Header anklickbar ist. Ein kleiner Fehler, den ich bemerkt habe, ist, dass der Text ganz rechts in jedem Bereich ein wenig "gedrückt" wird, bis die Animation zum Öffnen / Schließen der Folie abgeschlossen ist. Wenn jemand weiß, wie man das behebt, tun Sie es bitte. Hier ist die Geige: Aktualisiert JSFiddle
Pieter VDE
57

Sie könnten diese Art von Code verwenden:

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

=> JsFiddle arbeiten

Zessx
quelle
2
Das ist ein viel besserer Weg, Zessx, gut gemachter Kumpel. Dies ist die erste saubere Lösung, die ich seit dem Start von Bootstrap 3 gesehen habe.
Ryan Scott
9
Sie könnten auch verwenden$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
Sniper Wolf
4
Wenn Sie es vorziehen, dass sich der Pfeil zu Beginn des Zusammenbruchs anstatt am Ende bewegt, können Sie ihn $('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);stattdessen verwenden
Will Parker,
Das funktioniert sehr gut. Wie kann ich das Symbol schneller umschalten lassen?
Rachel S
@RachelS Der Vorschlag von Will Parker macht es schneller.
Phil Jollans
22

Um die Antwort mit den meisten Upticks zu verbessern, haben einige von Ihnen möglicherweise beim ersten Laden der Seite bemerkt, dass die Chevrons alle in die gleiche Richtung zeigen. Dies wird korrigiert, indem die Klasse "reduziert" zu Elementen hinzugefügt wird, die Sie reduziert laden möchten.

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

Hier ist eine funktionierende Geige: http://jsfiddle.net/3gYa3/585/

Dmidify
quelle
10

Verbesserung der Antwort von Bludream:

Sie können definitiv FontAwesome verwenden!

Stellen Sie sicher, dass Sie "reduziert" zusammen mit der Klasse "Panel-Überschrift" einschließen. Die "reduzierte" Klasse wird erst eingeschlossen, wenn Sie auf das Bedienfeld klicken, damit Sie die "reduzierte" Klasse einschließen können, um den richtigen Chevron anzuzeigen (dh Chevron-rechts wird beim Reduzieren und Chevron-down beim Öffnen angezeigt).

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

Es wird auch empfohlen, eine neue Klasse zu erstellen, anstatt eine vorhandene Klasse zu verwenden.

Siehe Codepen zum Beispiel: http://codepen.io/anon/pen/PPxOJX

Schloss
quelle
Und mit fontawesome 4: fa-chevron-up für das Element und .collapsed .fa-chevron-up: vor {content: "\ f077";} für die Klasse
Denis Chenu
9

Dank Biggates und Steakpi. Als Antwort auf die Frage Dreamonic habe ich ein paar Änderungen vorgenommen, um alle Header anklickbar zu machen (nicht nur Titelstring und Gluphs) und die Unterstreichung vom Link entfernt. Um zu erzwingen, dass Symbole in derselben Zeile angezeigt werden, habe ich am Ende der CSS-Anweisungen h4 hinzugefügt. Hier ist der geänderte Code:

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

Und das modifizierte CSS:

.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;
}
Jeff_Alieffson
quelle
7

Hier sind ein paar reine CSS-Hilfsklassen, mit denen Sie jede Art von Umschaltinhalt direkt in Ihrem HTML-Code verarbeiten können.

Es funktioniert mit jedem Element, das Sie wechseln müssen. Was auch immer Ihr Layout ist, Sie fügen es einfach in ein paar Elemente mit den Klassen .if-Collapse und .if-Not-Collapse innerhalb des Toggle-Elements ein.

Der einzige Haken ist, dass Sie sicherstellen müssen, dass Sie den gewünschten Ausgangszustand des Umschalters eingestellt haben. Wenn es anfänglich geschlossen ist, setzen Sie eine reduzierte Klasse auf den Schalter.

Es erfordert auch den : not- Selektor, es funktioniert nicht auf IE8.

HTML-Beispiel:

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

Weniger Version:

[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;
}
Jens
quelle
6

Ich weiß, dass dies alt ist, aber da es jetzt 2018 ist, dachte ich, ich würde antworten, um es besser zu machen, indem ich den Code vereinfache und die Benutzererfahrung verbessere, indem ich den Chevron basierend auf dem Zusammenbruch drehen lasse oder nicht. Ich benutze jedoch FontAwesome. Hier ist das 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);
}

Hier ist der HTML-Code für den Panel-Bereich:

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

Ich benutze Bootstraps, die nach rechts gezogen werden, um den Chevron ganz rechts von der Panel-Überschrift zu ziehen, die in voller Breite und ansprechend sein sollte. Das CSS erledigt die gesamte Animationsarbeit und dreht den Chevron basierend darauf, ob das Bedienfeld reduziert ist oder nicht. Einfach.

Robert Lindabury
quelle
4

einfaches Beispiel arbeiten

  • Holen Sie sich den Körperzustand angezeigt / versteckt
  • zu seinem Elternteil att
  • Find Find Icon
  • Icon ändern

einfach eingeben

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");
});
jai
quelle
2

oder ... Sie können einfach einen solchen Stil verwenden.

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

http://codepen.io/anon/pen/GJjrQN

kangcireng
quelle
1

Ich benutze Schrift super ! und wollte, dass eine Platte zusammenklappbar ist

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

und die CSS

.panel-heading .fa-chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";   
}

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Azerafati
quelle
1

Angular scheint hier Probleme mit den JavaScript-basierten Ansätzen zu verursachen (zumindest die, die ich ausprobiert habe). Ich habe diese Lösung hier gefunden: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . Der Kern davon besteht darin, data-ng-clickdie Umschalttaste zu verwenden und die Methode zum Ändern der Schaltfläche in der Steuerung unter Verwendung des $scopeKontexts festzulegen .

Ich denke, ich könnte mehr Details liefern ... meine Schaltflächen sind auf das Glyphikon des Anfangszustands des Div eingestellt, in dem sie kollabieren (Glyphicon-Chevron-rechts == kollabiertes Div).

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>

controller.js:

.controller('PageController', function($scope, $rootScope) {
    $scope.collapse = function (event) {
        $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
    };
)
LostNomad311
quelle
1

Einzeiler.

i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }

In diesem Beispiel werden zusammenklappbare Tabellenzeilen gruppiert. Das einzige, was Sie tun müssen, ist, den Namen der Zielklasse (mein-Kollaps-Name) zu Ihrem Symbol hinzuzufügen:

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

Sie können dasselbe mit der nativen Caret-Klasse von Bootstrap erreichen, indem Sie <span class='caret my-collapse-name'></span>und verwendenspan.caret.collapse.in { transform: rotate(90deg); }

dperish
quelle
0

Wenn Sie versuchen, dies nur mit Panels zu verwenden (nicht mit Accordeon), versuchen Sie diesen 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>
Nils
quelle
-3

Ich wollte einen reinen HTML-Ansatz, da ich HTML reduzieren und erweitern wollte, das im laufenden Betrieb über eine Vorlage hinzugefügt wurde! Ich habe mir das ausgedacht ...

https://jsfiddle.net/3mguht2y/1/

var noJavascript = ":)";

Welches könnte für jemanden von Nutzen sein :)

Mattius
quelle