Bagaimana cara membuat akordeon Bootstrap runtuh saat mengklik div header?

167

Dalam akordeon Bootstrap, alih-alih memerlukan klik pada ateks, saya ingin membuatnya runtuh ketika mengklik di mana saja di panel-headingdiv.

Saya menggunakan Bootstrap 3. Jadi, bukannya akordeon, itu hanya panel yang bisa dilipat. Adakah yang tahu bagaimana melakukan seluruh panel yang dapat diklik?

twitter-bootstrap  twitter-bootstrap-3 
— 9 biru
sumber
Baiklah, Anda mendapat jawaban. Tapi, link ini akan membantu Anda untuk menemukan gaya yang berbeda dari Bootstrap Accordion Menu designerslib.com/bootstrap-accordion-menu
— Karuppiah RK

Jawaban:

292

Yang perlu Anda lakukan adalah menggunakan ...

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

... pada elemen yang ingin Anda klik untuk memicu efek runtuh / bentangkan.

Elemen dengan data-toggle="collapse"akan menjadi elemen untuk memicu efek. Itudata-target atribut menunjukkan elemen yang akan memperluas ketika efek dipicu.

Secara opsional, Anda dapat mengatur data-parentjika Anda ingin membuat efek akordeon alih-alih independen dilipat, misalnya:

  • data-parent="#accordion"

Saya juga akan menambahkan CSS berikut ke elemen dengan data-toggle="collapse"jika mereka bukan <a>tag, misalnya:

.panel-heading {
    cursor: pointer;
}

Berikut adalah jsfiddle dengan html yang dimodifikasi dari dokumentasi Bootstrap 3 .

— suram
sumber
11
Sepertinya ini harus kode default / demo. Jauh lebih bagus daripada menggunakan <a>.
— dbn
metode ini tidak berfungsi untuk iphone. per jawaban untuk stackoverflow.com/questions/19866172/... itu harus <a> (karena memerlukan href) agar dapat dilipat di iphone ... ada ide?
— minovsky
2
@minovsky Bagaimana dengan JSFiddle yang diperbarui ini: jsfiddle.net/Tcgyx/60 ? Sayangnya saya tidak punya iPhone untuk diuji. Saya akan memperbarui jawaban saya jika ini berhasil.
— muram
@ haji terima kasih untuk biola! Tidak selalu berhasil, tetapi izinkan saya bereksperimen lebih banyak dan mencari tahu apakah saya dapat menghasilkan kegagalan dengan andal.
— minovsky
1
@wutzebaer Anda bisa memiliki role="tab button"dan browser akan menafsirkan yang pertama dalam daftar yang dimengerti (kemungkinan besar tab). Padahal, saya tidak yakin yang mana dari keduanya yang lebih baik. Cobalah untuk menemukan makna tabdan buttonperan dan yang akan memberikan jawaban untuk yang untuk memilih.
— muram
67

Cara lain adalah membuat Anda <a>penuh mengisi semua ruang panel-heading. Gunakan gaya ini untuk melakukannya:

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

Lihat demo ini ( http://jsfiddle.net/KbQyx/ ).

Kemudian ketika Anda mengklik tajuk, Anda sebenarnya mengklik <a>.

— calfzhou
sumber
Ah solusi hebat bagi kita yang menggunakan pustaka GWTBootstrap.
— Bersalju
Saya tidak melihat ini sampai saya menerapkan solusi serupa. Perubahan CSS adalah perubahan yang paling tidak invasif bagi saya. Saya memilih tampilan: inline-blok, lebar: 100% dan karena kami menggunakan Glyphicons untuk kami, a: sebelum memiliki margin-kiri: -10px dan margin-kanan: 10px.
— Kirk Liemohn
1
Metode ini tidak berfungsi pada perangkat iOS, yang biasanya menjadi perhatian utama saat bekerja dengan Bootstrap.
— Jared
Jared, bisakah kau jelaskan? Mengapa ini tidak berhasil karena ini terbatas pada versi Safari tertentu?
— Dr. Jan-Philip Gehrcke
1
Keuntungan dari metode ini adalah ia juga berfungsi untuk Boostrap UI untuk AngularJS (di mana Anda tidak ingin / memerlukan Bootstrap's JS).
— Dr. Jan-Philip Gehrcke
12

Saya telah memperhatikan beberapa kekurangan kecil di jsfiddle suram.

Untuk mendapatkan pointer berubah menjadi satu tangan untuk seluruh panel gunakan:

.panel-heading {
   cursor: pointer;
}

Saya telah menghapus <a>tag (masalah gaya) dan terus data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."di panel-headingseluruh.

Saya telah menambahkan metode CSS untuk menampilkan chevron, menggunakan font-awesome.cssdi jsfiddle saya:

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

— WeaverSnap
sumber
Ini hampir berhasil. Chevron muncul terbalik ketika halaman dimuat dan mengoreksi diri setelah memperluas dan meruntuhkan salah satu panel.
— Connie DeCinko
@ConnieDeCinko Ubah panel-headingke panel-heading collapseduntuk memperbaiki chevron terbalik.
— Amy Barrett
5

Inilah solusi untuk Bootstrap4. Anda hanya perlu memasukkan card-headerkelas ke dalam atag. Ini adalah modifikasi dari contoh di 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>
Luaskan cuplikan

— pengguna2233706
sumber
4

Solusi sederhana adalah dengan menghapus bantalan dari .panel-headingdan menambah .panel-title a.

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

Solusi ini mirip dengan yang di atas diposting oleh calfzhou , sedikit berbeda.

— Rhythm Ruparelia
sumber
1

Sebenarnya panel saya memiliki ikon panah keadaan runtuh ini dan saya mencoba jawaban lain di pos ini, tetapi posisi ikon berubah, jadi di sini adalah solusi dengan ikon panah keadaan runtuh .

Tambahkan Custom CSS ini

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

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

Kredit diberikan ke penjawab pos ini .

Semoga bisa membantu.

— shaijut
sumber
0

Berikut adalah contoh kerja untuk 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>
Luaskan cuplikan

— Pengembang
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.