Bootstrap runtuh

Bootstrap Colapse plugin

Colapse plugin memudahkan untuk meruntuhkan kawasan halaman. Sama ada anda menggunakannya untuk membuat navigasi akordion atau panel kandungan, ia membenarkan banyak pilihan kandungan.

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk collapse.js. Anda juga perlu merujuk pemalam Transition dalam versi Bootstrap anda. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi kecil bootstrap.min.js.

Anda boleh menggunakan pemalam Runtuhkan:

Buat kumpulan boleh lipat atau akordion , seperti ditunjukkan di bawah:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 折叠面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseOne">
          点击我进行展开，再次点击我进行折叠。第 1 部分
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseTwo">
          点击我进行展开，再次点击我进行折叠。第 2 部分
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseThree">
          点击我进行展开，再次点击我进行折叠。第 3 部分
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" " untuk melihat contoh dalam talian

data-toggle="collapse" Tambahkan pada pautan komponen yang anda ingin kembangkan atau runtuhkan. Atribut
href atau data-target ditambahkan pada komponen induk dan nilainya ialah id< komponen anak. Atribut
data-parent menambah id akordion pada pautan komponen yang akan dikembangkan atau diruntuhkan.

Buat mudah boleh lipat tanpa tag akordion, seperti ditunjukkan di bawah:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 简单的可折叠组件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<button type="button" class="btn btn-primary" data-toggle="collapse" 
   data-target="#demo">
   简单的可折叠组件
</button>

<div id="demo" class="collapse in">
  Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
  cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
  vice lomo.
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

Seperti yang anda lihat dalam contoh, kami telah mencipta komponen boleh lipat dan tidak seperti akordion, kami tidak menambah atribut data-parent .

Penggunaan

Jadual berikut menyenaraikan kelas yang digunakan oleh pemalam Runtuhkan untuk mengendalikan penskalaan berat:

Class	描述	实例
.collapse	隐藏内容。	尝试一下
.collapse.in	显示内容。	尝试一下
.collapsing	当过渡效果开始时被添加，当过渡效果完成时被移除。

Anda boleh menggunakan pemalam Runtuhkan dalam dua cara berikut:

Dengan atribut data : tambahkan data-toggle=" pada elemen runtuh" dan sasaran data, secara automatik menetapkan kawalan kepada elemen boleh lipat. Atribut data-target menerima pemilih CSS dan akan menggunakan kesan runtuh padanya. Pastikan anda menambah kelas .runtuhkan pada elemen boleh lipat. Jika anda mahu ia dihidupkan secara lalai, tambahkan kelas tambahan .in.
Untuk menambah pengurusan kumpulan seperti akordion pada kawalan boleh lipat, tambahkan atribut data data-parent="#selector".
Melalui JavaScript: Kaedah runtuh boleh diaktifkan melalui JavaScript seperti berikut:

$(' .collapse').collapse()

Pilihan

Sesetengah pilihan dihantar melalui atribut data atau JavaScript. Jadual berikut menyenaraikan pilihan ini:

选项名称	类型/默认值	Data 属性名称	描述
parent	selector 默认值：false	data-parent	如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。
toggle	boolean 默认值：true	data-toggle	切换调用可折叠元素。

Kaedah

Berikut ialah beberapa kaedah berguna dalam pemalam Runtuhkan:

< tbody>

Kaedah

Penerangan

Instance

方法	描述	实例
Options: .collapse(options)	激活内容为可折叠元素。接受一个可选的 options 对象。	$('#identifier').collapse({ toggle: false })
Toggle: .collapse('toggle')	切换显示/隐藏可折叠元素。	$('#identifier').collapse('toggle')
Show: .collapse('show')	显示可折叠元素。	$('#identifier').collapse('show')
Hide: .collapse('hide')	隐藏可折叠元素。	$('#identifier').collapse('hide')

Pilihan:< 🎜> .collapse (pilihan)

Aktifkan kandungan sebagai elemen boleh lipat. Menerima objek pilihan pilihan.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 折叠（Collapse）插件方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
   <div class="panel panel-default">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseOne">
               点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
            </a>
         </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-success">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseTwo">
               点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
            </a>
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseThree">
               点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-warning">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseFour">
               点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
            </a>
         </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>  

</body>
</html>

<🎜>Togol:<🎜> .collapse('toggle')

Togol tunjukkan/sembunyikan elemen boleh lipat .

$('#identifier').on('show.bs.collapse', function () {
  // 执行一些动作...
})

<🎜>Tunjukkan:<🎜> .collapse('show')

Tunjukkan elemen boleh lipat.

$('#identifier').on('shown.bs.collapse', function () {
  // 执行一些动作...
})

<🎜>Sembunyikan:<🎜> .collapse('hide')

Sembunyikan elemen boleh lipat.

$('#identifier').on('hide.bs.collapse', function () {
  // 执行一些动作...
})

Contoh

Contoh berikut menunjukkan penggunaan kaedah

Contoh

$('#identifier').on('hidden.bs.collapse', function () {
  // 执行一些动作...
})

Run Example»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Acara

Jadual berikut menyenaraikan peristiwa yang digunakan dalam pemalam Runtuhkan. Acara ini boleh digunakan sebagai cangkuk dalam fungsi.

事件	描述	实例
show.bs.collapse	在调用 show 方法后触发该事件。	<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 折叠（Collapse）插件事件</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="panel-group" id="accordion"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseexample"> 点击我进行展开，再次点击我进行折叠。--shown 事件 </a> </h4> </div> <div id="collapseexample" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#collapseexample').on('show.bs.collapse', function () { alert('嘿，当您展开时会提示本警告');}) }); </script> </body> </html>
shown.bs.collapse	当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。	rrreee
hide.bs.collapse	当调用 hide 实例方法时立即触发该事件。	rrreee
hidden.bs.collapse	当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。	rrreee

Contoh

Contoh berikut menunjukkan penggunaan acara:

Instance

rrreee

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Bootstrap runtuh

Bootstrap Colapse plugin

Instance

Instance

Penggunaan

Pilihan

Kaedah

Contoh

Contoh

Acara

Contoh

Instance

Laman web PHP Cina