📌  相关文章
📜  Bootstrap-折叠插件

📅  最后修改于: 2020-10-27 06:24:16             🧑  作者: Mango

 

折叠插件可让您轻松折叠页面。无论您是用它来构建手风琴导航还是内容盒，它都允许很多内容选择。

如果要单独包含此插件功能，则将需要crash.js 。这还要求您的Bootstrap版本中包含Transition插件。另外，如《 Bootstrap插件概述》一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

您可以使用折叠插件-

  • 创建可折叠的组或手风琴。可以按照下面的示例示例创建-
现场演示

   

      
      

         

            
               Click me to expand. Click me again to collapse.Section 1
            
         

      

      
      

         

            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         

      

      
   

   
   

      

         

            
               Click me to expand. Click me again to collapse.Section 2
            
         

      


      

         

            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         

      

      
   

   
   

      

         

            
               Click me to expand. Click me again to collapse.Section 3
            
         

      

     
      

         

            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
  • data-toggle =“ collapse”添加到您单击以展开或折叠组件的链接。
  • href或data-target属性添加到父组件，其值是子组件的ID 。
  • 添加了data-parent属性，以创建类似手风琴的效果。

  • 创建没有手风琴标记的简单可折叠式-可以像下面的示例示例中那样创建-
现场演示




   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.

在示例中可以看到，我们创建了一个简单的可折叠组件，与手风琴不同，我们没有添加data-parent属性。

用法

下表列出了折叠插件用于处理繁重任务的类-

Sr.No. Class &Description
1 .collapse

Hides the content.
2 .collapse.in

Shows the content.
3 .collapsing

Is added when the transition starts, and removed when it finishes.

您可以通过两种方式使用崩溃插件-

  • 通过数据属性-将data-toggle =“ collapse”和数据目标添加到元素，以自动分配对可折叠元素的控制。 data-target属性将接受CSS选择器来应用折叠。确保将.collapse类添加到可折叠元素中。如果您希望它默认打开，请包括附加类.in 。

    要将类似手风琴的组管理添加到可折叠控件中，请添加数据属性data-parent =“ #selector” 。

  • 通过JavaScript-可以使用JavaScript激活崩溃方法，如下所示-
$('.collapse').collapse()

选件

下表列出了可以通过数据属性或JavaScript传递的某些选项：

Option Name Type/Default Value Data attribute name Description
parent selector Default − false data-parent If selector is false, then all collapsible elements under the specified parent will be closed (similar to traditional accordion behavior – this dependent on the accordion-group class).
toggle boolean Default − true data-toggle Toggles the collapsible element on invocation.

方法

这是与可折叠元素一起使用的一些有用方法的列表。

Method Description Example
Options − .collapse(options) Activates your content as a collapsible element. Accepts an optional options object. 
$('#identifier').collapse({
   toggle: false
})
Toggle − .collapse(‘toggle’) Toggles a collapsible element to shown or hidden. 
$('#identifier').collapse('toggle')
Show − .collapse(‘show’) Shows a collapsible element. 
$('#identifier').collapse('show')
Hide − .collapse(‘hide’) Hides a collapsible element. 
$('#identifier').collapse('hide')

例

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

现场演示

   

      
      

         

            
               Click me to expand. Click me again to collapse. Section 1--hide method
            
         

      

      
      

         

            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         

      

      
   

   
   

      

         

            
               Click me to expand. Click me again to collapse. Section 2--show method
            
         

      

      
      

         

            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         

      

      
   

   
   

      

         

            
               Click me to expand. Click me again to collapse. Section 3--toggle method
            
         

      

      
      

         

            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         

      

   

   
   

      

         

            
               Click me to expand. Click me again to collapse. Section 4--options method
            
         

      

      
      

         

            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.

大事记

下表列出了可以与折叠功能一起使用的一些事件。

Event Description Example
show.bs.collapse Fired after the show method is called. 
$('#identifier').on('show.bs.collapse', function () {
   // do something
})
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). 
$('#identifier').on('shown.bs.collapse', function () {
   // do something
})
hide.bs.collapse Fired when the hide instance method has been called. 
$('#identifier').on('hide.bs.collapse', function () {
   // do something
})
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). 
$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

例

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

现场演示

   

   
      

         

            
               Click me to expand. Click me again to collapse. Section --shown event
            
         

      

      
      

         

            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.