Wie kann ein Bootstrap-Akkordeon beim Klicken auf das Header-Div zusammenbrechen?

166

In einem Bootstrap-Akkordeon amöchte ich , anstatt auf den Text zu klicken , ihn kollabieren lassen, wenn ich auf eine beliebige Stelle im panel-headingDiv klicke.

Ich verwende Bootstrap 3. Anstelle von Akkordeon ist es also nur ein zusammenklappbares Panel. Irgendeine Idee, wie man das gesamte Panel anklickbar macht?

twitter-bootstrap  twitter-bootstrap-3 
— 9blue
quelle
Du hast eine Antwort bekommen. Aber dieser Link wird Ihnen helfen, verschiedene Stile von Bootstrap-Akkordeon-Menüs zu finden. Designerlib.com/bootstrap-accordion-menu
— Karuppiah RK

Antworten:

291

Alles was Sie tun müssen, ist zu verwenden ...

  • data-toggle="collapse"
  • data-target="#ElementToExpandOnClick"

... auf das Element, auf das Sie klicken möchten, um den Reduzierungs- / Erweiterungseffekt auszulösen.

Das Element mit data-toggle="collapse"ist das Element, das den Effekt auslöst. Das data-targetAttribut gibt das Element an, das erweitert wird, wenn der Effekt ausgelöst wird.

Optional können Sie festlegen, data-parentob ein Akkordeoneffekt anstelle eines unabhängigen zusammenklappbaren Effekts erstellt werden soll, z.

  • data-parent="#accordion"

Ich würde den Elementen auch das folgende CSS hinzufügen, data-toggle="collapse"wenn sie keine <a>Tags sind, z.

.panel-heading {
    cursor: pointer;
}

Hier ist eine jsfiddle mit dem modifizierten HTML aus der Bootstrap 3-Dokumentation .

— grimmig
quelle
11
Scheint so, als ob dies der Standard- / Demo-Code sein sollte. Viel schöner als <a>.
— dbn
Diese Methode funktioniert nicht für iPhone. Gemäß der Antwort auf stackoverflow.com/questions/19866172/… muss es <a> sein (da es die href erfordert), damit es auf dem iPhone zusammenklappbar ist ... irgendwelche Ideen?
— Minovsky
2
@minovsky Wie wäre es mit dieser aktualisierten JSFiddle: jsfiddle.net/Tcgyx/60 ? Leider habe ich kein iPhone zum Testen. Ich werde meine Antwort aktualisieren, wenn dies funktioniert.
— grimmiger
@grim danke für die Geige! Es funktioniert nicht immer, aber lassen Sie mich mehr experimentieren und herausfinden, ob ich den Fehler zuverlässig erzeugen kann.
— Minovsky
1
@wutzebaer Sie könnten haben role="tab button"und der Browser wird den ersten in der Liste interpretieren, den er versteht (höchstwahrscheinlich tab). Ich bin mir jedoch nicht sicher, welcher der beiden besser ist. Versuchen Sie, die Bedeutung der tabund buttonRollen zu finden, und das würde Ihnen die Antwort geben, welche Sie wählen sollen.
— grimmig
67

Ein anderer Weg ist, machen Sie Ihre <a> gesamten Raum des Raums vollständig auszufüllen panel-heading. Verwenden Sie dazu diesen Stil:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

Überprüfen Sie diese Demo ( http://jsfiddle.net/KbQyx/ ).

Wenn Sie dann auf die Überschrift klicken, klicken Sie tatsächlich auf die Überschrift <a>.

— Kalbzhou
quelle
Eine großartige Lösung für diejenigen von uns, die die GWTBootstrap-Bibliothek verwenden.
— Schnee
Ich habe das erst gesehen, als ich eine ähnliche Lösung implementiert habe. CSS-Änderungen waren für mich die am wenigsten invasive Änderung. Ich habe Anzeige gewählt: Inline-Block, Breite: 100% und da wir Glyphicons für unsere verwenden, hat das a: before Rand-links: -10px und Rand-rechts: 10px.
— Kirk Liemohn
1
Diese Methode funktioniert nicht auf iOS-Geräten, was normalerweise ein Hauptanliegen bei der Arbeit mit Bootstrap ist.
— Jared
Jared, kannst du das näher erläutern? Warum ist dies nicht auf bestimmte Safari-Versionen beschränkt?
— Dr. Jan-Philip Gehrcke
1
Der Vorteil dieser Methode ist, dass sie auch für die Boostrap-Benutzeroberfläche für AngularJS funktioniert (wo Sie Bootstraps JS nicht wollen / brauchen).
— Dr. Jan-Philip Gehrcke
12

Ich habe ein paar kleinere Fehler in Grims Jsfiddle bemerkt.

Verwenden Sie Folgendes, um den Zeiger für das gesamte Bedienfeld in eine Hand zu verwandeln:

.panel-heading {
   cursor: pointer;
}

Ich habe die entfernt <a>Tag (ein Stil Ausgabe) und hielt data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."auf der panel-headingganzen.

Ich habe eine CSS-Methode zum Anzeigen von Chevron hinzugefügt, die font-awesome.cssin meiner jsfiddle verwendet wird:

http://jsfiddle.net/weaversnap/7FqsX/1/

— WeaverSnap
quelle
Das funktioniert fast. Die Chevrons erscheinen beim Laden der Seite verkehrt herum und korrigieren sich nach dem Erweitern und Reduzieren eines der Bedienfelder.
— Connie DeCinko
@ConnieDeCinko Wechseln Sie panel-headingzu panel-heading collapsed, um die umgedrehten Chevrons zu reparieren.
— Amy Barrett
5

Hier ist eine Lösung für Bootstrap4. Sie müssen nur die card-headerKlasse in das aTag einfügen. Dies ist eine Modifikation aus einem Beispiel in W3Schools .

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-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="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-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="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-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>
Erweitern Sie das Snippet

— user2233706
quelle
4

Eine einfache Lösung wäre, die Polsterung zu entfernen .panel-headingund zu ergänzen .panel-title a.

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

Diese Lösung ähnelt der obigen von calfzhou , etwas anders.

— Rhythmus Ruparelia
quelle
1

Eigentlich hatte mein Panel dieses Pfeil-Symbol für den Status "Zusammenbruch" und ich habe andere Antworten in diesem Beitrag ausprobiert, aber die Symbolposition wurde geändert. Hier ist die Lösung mit dem Pfeil-Symbol für den Status "Zusammenbruch" .

Fügen Sie dieses benutzerdefinierte CSS hinzu

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

Gutschrift geht an diesen Post-Antwortenden.

Hoffnung hilft.

— Shaijut
quelle
0

Hier ist das Arbeitsbeispiel für Bootstrap 4.3 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>
Erweitern Sie das Snippet

— Entwickler
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.