Come far crollare una fisarmonica Bootstrap quando si fa clic sull'intestazione div?

167

In una fisarmonica Bootstrap, invece di richiedere un clic sul atesto, voglio farlo crollare quando si fa clic in qualsiasi punto del panel-headingdiv.

Sto usando Bootstrap 3. Quindi, invece della fisarmonica, è solo un pannello pieghevole. Qualche idea su come fare clic su tutto il pannello?

twitter-bootstrap  twitter-bootstrap-3 
— 9blue
fonte
Bene hai una risposta. Ma questo link ti aiuterà a trovare diversi stili di Bootstrap Accordion Menus designerslib.com/bootstrap-accordion-menu
— Karuppiah RK

Risposte:

292

Tutto quello che devi fare è usare ...

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

... sull'elemento su cui si desidera fare clic per attivare l'effetto di compressione / espansione.

L'elemento con data-toggle="collapse"sarà l'elemento per attivare l'effetto. Ildata-target attributo indica l'elemento che si espanderà quando viene attivato l'effetto.

Se lo si desidera, è possibile impostare data-parentse si desidera creare un effetto a fisarmonica anziché pieghevole pieghevole, ad esempio:

  • data-parent="#accordion"

Vorrei anche aggiungere il seguente CSS agli elementi con data-toggle="collapse"se non sono <a>tag, ad esempio:

.panel-heading {
    cursor: pointer;
}

Ecco un jsfiddle con l'html modificato dalla documentazione di Bootstrap 3 .

— truce
fonte
11
Sembra che questo dovrebbe essere il codice predefinito / demo. Molto più bello dell'uso di <a>.
— dbn
questo metodo non funziona per iPhone. per la risposta a stackoverflow.com/questions/19866172/… deve essere <a> (poiché richiede l'href) affinché sia ​​pieghevole su iPhone ... qualche idea?
— minovsky,
2
@minovsky Che ne dici di questo JSFiddle aggiornato: jsfiddle.net/Tcgyx/60 ? Purtroppo non ho un iPhone da testare. Aggiornerò la mia risposta se funziona.
— torvo
@grim grazie per il violino! Non sempre funziona, ma lasciami sperimentare di più e capire se riesco a produrre l'errore in modo affidabile.
— minovsky,
1
@wutzebaer Potresti avere role="tab button"e il browser interpreterà il primo nell'elenco che capisce (molto probabilmente tab). Tuttavia, non sono sicuro di quale dei due sia migliore. Prova a trovare il significato delle tabe buttonruoli e che darebbe la risposta su quale scegliere.
— torvo
67

Un altro modo è <a>riempire completamente tutto lo spazio di panel-heading. Usa questo stile per farlo:

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

Controlla questa demo ( http://jsfiddle.net/KbQyx/ ).

Quindi, quando si fa clic sull'intestazione, si sta effettivamente facendo clic su <a>.

— calfzhou
fonte
Ah un'ottima soluzione per quelli di noi che usano la libreria GWTBootstrap.
— nevica il
Non l'ho visto fino a quando non ho implementato una soluzione simile. Le modifiche CSS sono state le modifiche meno invasive per me. Ho scelto display: inline-block, larghezza: 100% e poiché stiamo usando Glyphicons per i nostri, la a: prima ha margin-left: -10px e margin-right: 10px.
— Kirk Liemohn,
1
Questo metodo non funziona su dispositivi iOS, che in genere è un problema principale quando si lavora con Bootstrap.
— Jared,
Jared, puoi elaborare? Perché questo non funziona su questo è limitato ad alcune versioni di Safari?
— Dr. Jan-Philip Gehrcke,
1
Il vantaggio di questo metodo è che funziona anche per l'interfaccia utente di Boostrap per AngularJS (dove non si desidera / non è necessario il JS di Bootstrap).
— Dr. Jan-Philip Gehrcke,
12

Ho notato un paio di piccoli difetti nel jsfiddle di Grim.

Per ottenere che il puntatore si trasformi in una mano per l'intero pannello, utilizzare:

.panel-heading {
   cursor: pointer;
}

Ho rimosso il <a>tag (una questione di stile) e continuai data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."supanel-heading tutto.

Ho aggiunto un metodo CSS per visualizzare chevron, usando font-awesome.css nel mio jsfiddle:

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

— WeaverSnap
fonte
Questo funziona quasi. I galloni appaiono capovolti quando la pagina viene caricata e si correggono dopo l'espansione e il crollo di uno dei pannelli.
— Connie DeCinko,
@ConnieDeCinko Passa panel-headinga panel-heading collapsedper correggere i galloni rovesciati.
— Amy Barrett,
5

Ecco una soluzione per Bootstrap4. Devi solo inserire la card-headerclasse nel atag. Questo è stato modificato da un esempio 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>
Espandi frammento

— user2233706
fonte
4

Una soluzione semplice sarebbe quella di rimuovere l'imbottitura .panel-headinge aggiungerla a .panel-title a.

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

Questa soluzione è simile a quella sopra pubblicata da calfzhou , leggermente diversa.

— Rhythm Ruparelia
fonte
1

In realtà il mio pannello aveva questa icona della freccia dello stato di compressione e ho provato altre risposte in questo post, ma la posizione dell'icona è cambiata, quindi ecco la soluzione con l'icona della freccia dello stato di compressione .

Aggiungi questo CSS personalizzato

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

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

Il merito va a questo post risponditore.

La speranza aiuta.

— shaijut
fonte
0

Ecco l'esempio funzionante di 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>
Espandi frammento

— Sviluppatore
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.