Bootstrap - 摺疊外掛

上一頁
下一頁

摺疊外掛可以輕鬆建立頁面上可摺疊的部分。無論您是使用它來構建手風琴導航還是內容框，它都允許許多內容選項。

如果您想單獨包含此外掛功能，則需要collapse.js。這也需要將過渡外掛包含在您的 Bootstrap 版本中。否則，如Bootstrap 外掛概述章節中所述，您可以包含bootstrap.js或最小化的bootstrap.min.js。

您可以使用摺疊外掛 -

  • 建立可摺疊組或手風琴。這可以像下面的示例一樣建立 -

即時演示 
<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">
               Click me to expand. Click me again to collapse.Section 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">
               Click me to expand. Click me again to collapse.Section 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">
               Click me to expand. Click me again to collapse.Section 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>

  • data-toggle = "collapse"新增到您點選以展開或摺疊元件的連結上。

  • href或data-target屬性新增到父元件，其值為子元件的id。

  • data-parent屬性用於建立手風琴效果。

  • 建立無需手風琴標記的簡單可摺疊元件 - 這可以像下面的示例一樣建立 -

即時演示 
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</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>

正如您在示例中看到的，我們建立了一個簡單的可摺疊元件，與手風琴不同，我們沒有新增data-parent屬性。

用法

下表列出了摺疊外掛用於處理繁重工作的類 -

序號 類和描述
1

.collapse

隱藏內容。
2

.collapse.in

顯示內容。
3

.collapsing

在過渡開始時新增，並在過渡結束時刪除。

您可以透過兩種方式使用摺疊外掛 -

  • 透過資料屬性 - 向元素新增data-toggle = "collapse"和data-target以自動分配可摺疊元素的控制權。data-target屬性將接受一個 CSS 選擇器以應用摺疊。請務必向可摺疊元素新增.collapse類。如果您希望它預設開啟，請包含附加類.in。

    要向可摺疊控制元件新增類似手風琴的組管理，請新增資料屬性data-parent = "#selector"。

  • 透過 JavaScript - 摺疊方法可以用 JavaScript 啟用，如下所示 -

$('.collapse').collapse()

選項

可以透過資料屬性或 JavaScript 傳遞的某些選項列在下表中 -

選項名稱 型別/預設值 資料屬性名稱 描述
parent 選擇器 預設 - false data-parent 如果選擇器為 false，則指定父級下的所有可摺疊元素都將關閉（類似於傳統的手風琴行為 - 這取決於手風琴組類）。
toggle 布林值 預設 - true data-toggle 在呼叫時切換可摺疊元素。

方法

這是一個與可摺疊元素一起使用的有用方法列表。

方法 描述 示例

選項 - .collapse(options)

 將您的內容啟用為可摺疊元素。接受可選的選項物件。 
$('#identifier').collapse({
   toggle: false
})

切換 - .collapse('toggle')

 將可摺疊元素切換到顯示或隱藏。 
$('#identifier').collapse('toggle')

顯示 - .collapse('show')

 顯示可摺疊元素。 
$('#identifier').collapse('show')

隱藏 - .collapse('hide')

 隱藏可摺疊元素。 
$('#identifier').collapse('hide')

示例

以下示例演示了方法的使用 -

即時演示 
<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">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </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">
               Click me to expand. Click me again to collapse. Section 2--show method
            </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">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </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">
               Click me to expand. Click me again to collapse. Section 4--options method
            </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>

事件

下表列出了可用於摺疊功能的一些事件。

事件 描述 示例
show.bs.collapse 呼叫 show 方法後觸發。 
$('#identifier').on('show.bs.collapse', function () {
   // do something
})
shown.bs.collapse 當可摺疊元素已對使用者可見時觸發此事件（將等待 CSS 過渡完成）。 
$('#identifier').on('shown.bs.collapse', function () {
   // do something
})
hide.bs.collapse 呼叫 hide 例項方法時觸發。 
$('#identifier').on('hide.bs.collapse', function () {
   // do something
})
hidden.bs.collapse 當可摺疊元素已對使用者隱藏時觸發此事件（將等待 CSS 過渡完成）。 
$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

示例

以下示例演示了事件的使用 -

即時演示 
<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">
               Click me to expand. Click me again to collapse. Section --shown event
            </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('Hey, this alert shows up when you expand it');
      })
   });
</script>
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.