In einem Bootstrap-Akkordeon a
möchte ich , anstatt auf den Text zu klicken , ihn kollabieren lassen, wenn ich auf eine beliebige Stelle im panel-heading
Div klicke.
Ich verwende Bootstrap 3. Anstelle von Akkordeon ist es also nur ein zusammenklappbares Panel. Irgendeine Idee, wie man das gesamte Panel anklickbar macht?
Antworten:
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. Dasdata-target
Attribut gibt das Element an, das erweitert wird, wenn der Effekt ausgelöst wird.Optional können Sie festlegen,
data-parent
ob 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.Hier ist eine jsfiddle mit dem modifizierten HTML aus der Bootstrap 3-Dokumentation .
quelle
role="tab button"
und der Browser wird den ersten in der Liste interpretieren, den er versteht (höchstwahrscheinlichtab
). Ich bin mir jedoch nicht sicher, welcher der beiden besser ist. Versuchen Sie, die Bedeutung dertab
undbutton
Rollen zu finden, und das würde Ihnen die Antwort geben, welche Sie wählen sollen.Ein anderer Weg ist, machen Sie Ihre
<a>
gesamten Raum des Raums vollständig auszufüllenpanel-heading
. Verwenden Sie dazu diesen Stil:Überprüfen Sie diese Demo ( http://jsfiddle.net/KbQyx/ ).
Wenn Sie dann auf die Überschrift klicken, klicken Sie tatsächlich auf die Überschrift
<a>
.quelle
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:
Ich habe die entfernt
<a>
Tag (ein Stil Ausgabe) und hieltdata-toggle="collapse" data-parent="#accordion" data-target="#collapse..."
auf derpanel-heading
ganzen.Ich habe eine CSS-Methode zum Anzeigen von Chevron hinzugefügt, die
font-awesome.css
in meiner jsfiddle verwendet wird:http://jsfiddle.net/weaversnap/7FqsX/1/
quelle
panel-heading
zupanel-heading collapsed
, um die umgedrehten Chevrons zu reparieren.Hier ist eine Lösung für Bootstrap4. Sie müssen nur die
card-header
Klasse in dasa
Tag einfügen. Dies ist eine Modifikation aus einem Beispiel in W3Schools .quelle
Eine einfache Lösung wäre, die Polsterung zu entfernen
.panel-heading
und zu ergänzen.panel-title a
.Diese Lösung ähnelt der obigen von calfzhou , etwas anders.
quelle
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
Gutschrift geht an diesen Post-Antwortenden.
Hoffnung hilft.
quelle
Hier ist das Arbeitsbeispiel für Bootstrap 4.3
quelle