Bootstrap: Reduzieren Sie andere Abschnitte, wenn einer erweitert wird

74

Ich mache eine Rails-App und versuche, eine bestimmte Funktionalität im Zusammenhang mit dem Bootstrap- Zusammenbruch von Twitter zu erreichen . Nehmen Sie mich mit, wenn ich es erkläre.

Ich habe derzeit die folgende Ansicht:

Geben Sie hier die Bildbeschreibung ein

Wenn auf jede dieser Schaltflächen geklickt wird, wird ihr Datenumschalt-Div erweitert. Die Ansicht ist wie folgt eingerichtet:

    <button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>

    <div class="collapse indent" id="keys">
        <!--content-->
    </div>

    <div class="collapse indent" id="attrs">
        <!--content-->
    </div>

    <div class="collapse" id="edit">
        <!--content-->
    </div>

Ich habe sie so eingerichtet, weil ich die Tasten nebeneinander in einer Reihe haben möchte. Wenn ich die Schaltflächen so bewege, dass sie sich direkt über der Ansicht befinden, die sie erweitern / reduzieren, werden die Schaltflächen übereinander gestapelt.

Mein Endziel ist es also, die drei Schaltflächen nebeneinander zu haben und sie zusammenfallen zu lassen und ihre jeweiligen Abschnitte zu erweitern. Das derzeitige Setup funktioniert jedoch etwas umständlich. Wenn beispielsweise jemand den Schlüsselabschnitt und dann den Attributabschnitt erweitert, muss er unter den Schlüsselabschnitt scrollen.

Für dieses Problem gibt es zwei mögliche Lösungen. Eine ist, dass das Drücken einer Taste dazu führt, dass die anderen 2 zusammenfallen. Dies würde bedeuten, dass zu einem bestimmten Zeitpunkt nur einer dieser Abschnitte erweitert wird.

Ich denke, die bessere Lösung wäre, sie so zu haben, dass beim Erweitern der Tasten die Schaltflächen rechts nach unten zum unteren Rand des Schlüsseldivs verschoben werden und beim Erweitern der Attribute die Schaltfläche zum Bearbeiten von Details zum unteren Rand des Divs verschoben wird . Ist das möglich? Ich habe bereits versucht, dies zu tun, indem ich die Schaltflächen übereinander stapeln ließ und ihre relative Position durch CSS änderte, aber das funktionierte nicht, da die anderen Schaltflächen beim Erweitern eines der Abschnitte an unangenehmen Stellen im Mitte des erweiterten Abschnitts.

Zuletzt möchte ich versuchen, dies ohne das auf der Bootstrap-Seite von Twitter erwähnte Verhalten im Akkordeonstil zu tun, aber wenn mich jemand vom Design-Standpunkt aus davon überzeugen kann, dass es vorzuziehen ist, würde ich es sicherlich noch einmal überdenken.

twitter-bootstrap collapse finiteloop
quelle
Haben Sie sich das data-parentAttribut angesehen ..?
Sherbrow
Nein, aber ich werde und ich werde zurückkommen und dich wissen lassen, ob das geholfen hat. Vielen Dank!
Finiteloop
Das hat bei mir nicht funktioniert. Ich bin mir nicht sicher, ob ich etwas falsch gemacht habe. Jede Hilfe wäre immer noch dankbar.
Finiteloop

Antworten:

95

Die data-parenterste Lösung besteht darin, sich an die Beispielauswahlarchitektur zu halten

<div id="myGroup">
    <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys  <span class="badge badge-info pull-right">X</span></button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>

    <div class="accordion-group">
        <div class="collapse indent" id="keys">
            keys
        </div>

        <div class="collapse indent" id="attrs">
            attrs
        </div>

        <div class="collapse" id="edit">
            edit
        </div>
    </div>
</div>

Demo (jsfiddle)

Die zweite Lösung besteht darin, die Ereignisse zu binden und die anderen zusammenklappbaren Elemente selbst auszublenden.

var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
    $myGroup.find('.collapse.in').collapse('hide');
});

Demo (jsfiddle)

PS: Der seltsame Effekt in den Demos wird durch das min-heightSet für das Beispiel verursacht. Ignorieren Sie das einfach.

Bearbeiten: Das JS-Ereignis wurde von showin geändert , show.bs.collapsewie in der Bootstrap-Dokumentation angegeben .

Sherbrow
quelle
8
Für mich war das <div class="accordion-group">...</div>das fehlende Stück. Einfach zu benutzen data-parenthat nicht geholfen. Ich habe die Anforderung der accordion-groupKlasse in der Bootstrap-Dokumentation nicht gesehen. Vielen Dank!
Srinidhi
2
@ Srinidhi Es geht nur um diesen Selektor: '> .accordion-group > .in'(src auf Github)
Sherbrow
1
Gebrochen wie in "Diese jsfiddle ist kaputt".
Léon Pelletier
2
Dies funktioniert nicht auf Bootstrap 3. Problem geöffnet: github.com/twbs/bootstrap/issues/10966
Keith W.
5
Die erste Lösung funktioniert nicht für BS3, wenn Ihr Markup nicht einer sehr strengen Hierarchie von Elementen entspricht. Lösung 2 ist daher besser.
33

Wenn Sie Ihr Markup nicht ändern möchten, führt diese Funktion den Trick aus:

jQuery('button').click( function(e) {
    jQuery('.collapse').collapse('hide');
});

Jedes Mal, wenn auf eine Schaltfläche geklickt wird, werden alle Abschnitte reduziert. Dann öffnet Bootstrap den von Ihnen ausgewählten.

GrafiCode
quelle
1
Diese generische Lösung hat bei mir sehr gut funktioniert. Ich wollte keine typische Akkordeongruppe verwenden und das war perfekt. Vielen Dank!
Rachel S
Was ist (e)hier
localhost
1
@Nofel e = eventObject Sie können es beispielsweise verwenden, um das Standardklickverhalten auf folgende Weise zu verhindern: e.preventDefault ();
GrafiCode
1
Ah, mein Akkordeon wird im Handumdrehen erstellt, wenn ich auf "Hinzufügen" klicke. Wie kann ich dem Code hinzufügen, den der zuletzt generierte Akkordeon zeigt, anstatt ihn auszublenden? Ich habe es versucht, aber es funktioniert nicht `$ ('button'). Click (function (e) {$ ('. Collapse'). Collapse ('hide'); $ ('. Collapse'). Last (). Zusammenbruch ('show'); `});
localhost
Wenn Sie diese Frage beantworten möchten
localhost
16

Für Bootstrap v4.1

Fügen Sie das data-parentAttribut collapsestattdessen den Elementen auf dem hinzu button.

<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys  <span class="badge badge-info pull-right">X</span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>

<div class="accordion-group">
    <div class="collapse indent" id="keys"  data-parent="#myGroup">
        keys
    </div>

    <div class="collapse indent" id="attrs"  data-parent="#myGroup">
        attrs
    </div>

    <div class="collapse" id="edit"  data-parent="#myGroup">
        edit
    </div>
</div>

Juan Carlos Ibarra
quelle
Dies funktionierte für mich, als der Umschalter nicht mehr funktionierte, als ich von Bootstrap 3.3.6 auf die neueste
Version 4
Hat bei Bootstrap 4.3.1 hervorragend funktioniert. Vielen Dank für diese einfache Lösung! 👍
Preben
9

Wenn Sie Bootstrap 4 verwenden und Ihr Markup nicht ändern möchten:

var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.show').collapse('hide');
});
Aberm
quelle
Hilft nicht für verschachtelte Listen.
tnk479
4

Bootstrap 3-Beispiel mit nebeneinander angeordneten Schaltflächen unter dem Inhalt

.panel-heading {
  display: inline-block;
}

.panel-group .panel+.panel {
  margin: 0;
  border: 0;
}

.panel {
  border: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a>
    </h4>
</div>
Erweitern Sie das Snippet

Bootstrap 3-Beispiel mit nebeneinander angeordneten Schaltflächen über dem Inhalt

.panel-heading {
  display: inline-block;
}

.panel-group .panel+.panel {
  margin: 0;
  border: 0;
}

.panel {
  border: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a>
    </h4>
</div>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
</div>
Erweitern Sie das Snippet

Frank Groot
quelle
1
Es ist wichtig zu beachten, dass Bootstrap 3 das class = "panel" um die Inhaltsblöcke benötigt, um wie ein Akkordeon zu funktionieren.
Jonas Eberle
3

Wenn Sie sich an die HTML-Struktur und die richtigen Selektoren gemäß der Bootstrap-Konvention halten, sollten Sie in Ordnung sein.

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
</div>

DEMO

cptstarling
quelle
1
Diese Informationen sind korrekt, aber keine Antwort auf seine Frage, da die obige Lösung jeden Abschnitt so festhält, dass er unter seinem Titel steht, während er alle Titel zusammen anzeigen und dann zwischen ihren Inhalten wechseln muss.
Peter T.
2

Benutze das:

$('.panel-defaul.ph').on('show.bs.collapse', function () {
    $(this).children('.panel-heading').addClass('panel-heading-collapsed');  
    $('.panel-defaul.ph').not(this).children('.panel-collapse').removeClass('in');
});
Murat SATIR
quelle
Das .not(this)war das, wonach ich gesucht habe!
Phillip Quinlan
2

In Bootstrap 4 funktioniert das Schließen aller reduzierten Elemente folgendermaßen:

AKTION:

<button id="CloseAll" class="btn btn-primary" type="button" data-toggle="collapse">Close All</button>

JQUERY:

$(document).ready(function() {
    $("#CloseAll").on('click', function() {
        $(".collapse").removeClass("show");
    });
});
Dhell
quelle
1

hier wie ein Zauber für Bootstrap 4> 4.1.1 arbeiten

var myGroup = $('your-list');

myGroup.on('show.bs.collapse','.collapse', function() {
   myGroup.find('.collapse.show').collapse('hide');
});
Vitor Piovezam
quelle
Dies sieht identisch aus mit Aberms Antwort
LarsTech
0

Die Methode funktioniert richtig für mich:

var lanopt = $(".language-option");

lanopt.on("show.bs.collapse",".collapse", function(){
   lanopt.find(".collapse.in").collapse("hide");
});
Rubel Hossain
quelle
0

Das war hilfreich für mich:

    jQuery('button').click( function(e) {
    jQuery('.in').collapse('hide');
});

Es ist bereits offener Abschnitt zusammengebrochen. Vielen Dank an GrafiCode Studio

Pavel L.
quelle