it-swarm.com.de

Wie mache ich einen Bootstrap Ziehharmonika-Kollaps, wenn ich auf das Header-Div klicke?

In einem Bootstrap Akkordeon muss nicht auf den Text a geklickt werden, sondern es soll ausgeblendet werden, wenn auf eine beliebige Stelle im Div panel-heading Geklickt wird.

Ich verwende Bootstrap 3. Statt Akkordeon ist es also nur ein zusammenklappbares Panel. Kann ich das gesamte Panel anklickbar machen?

157
9blue

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 Ein-/Ausblenden-Effekt auszulösen.

Das Element mit data-toggle="collapse" Ist das Element, das den Effekt auslöst. Das Attribut data-target Gibt das Element an, das erweitert wird, wenn der Effekt ausgelöst wird.

Optional können Sie data-parent Einstellen, wenn Sie einen Akkordeoneffekt anstelle eines unabhängigen zusammenklappbaren Effekts erzeugen möchten, z.

  • data-parent="#accordion"

Ich würde den Elementen mit data-toggle="collapse" Auch das folgende CSS hinzufügen, wenn es sich nicht um <a> - Tags handelt, z.

.panel-heading {
    cursor: pointer;
}

Hier ist ein Jsfiddle mit dem modifizierten HTML aus der Bootstrap 3 Dokumentation .

272
grim

Eine andere Möglichkeit ist, Ihren <a> Den gesamten Raum des panel-heading Ausfüllen zu lassen. 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 <a>.

66
calfzhou

Ich habe ein paar kleinere Fehler in Grims Jsfiddle bemerkt.

Um den Zeiger für das gesamte Bedienfeld in eine Hand zu ändern, verwenden Sie:

.panel-heading {
   cursor: pointer;
}

Ich habe das <a> - Tag (ein Stilproblem) entfernt und data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." Durchgehend auf panel-heading Belassen.

Ich habe eine CSS-Methode zum Anzeigen von Chevron mit font-awesome.css In meinem jsfiddle hinzugefügt:

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

12
WeaverSnap

Eine einfache Lösung wäre, das Auffüllen von .panel-heading Zu entfernen und zu .panel-title a Hinzuzufügen.

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

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

4

Hier ist eine Lösung für Bootstrap4. Sie müssen nur das card-header Klasse im Tag a. Dies ist eine Änderung von 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>
2
user2233706

Eigentlich hatte mein Panel this das Symbol für den Pfeil zum Reduzieren des Status und ich habe andere Antworten in diesem Beitrag ausprobiert, aber die Position des Symbols hat sich geändert. Deshalb hier die Lösung mit dem Symbol für den Pfeil zum Reduzieren des Status .

Fügen Sie dieses benutzerdefinierte CSS hinzu

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

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

Gutschrift geht an this Antworter.

Hoffnung hilft.

1
stom