Bootstrap 折叠插件Collapse 调用方式

调用方式

Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用。

1、data 属性调用

要激活折叠插件的激活行为,首先为标题部分的链接定义 data-toggle="collapse" 属性,还要为包含框定义 id,并在标题中通过 data-parent 属性指向该 id,以便在同一个包含框中同时只能有一个内容部分被显示出来。如:

 
  
  1. class="accordion" id="accordion2">
  2.     class="accordion-group">
  3.     class="accordion-heading">
  4.       class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
  5.         Collapsible Group Item #1
  6.      
  7.    
  •     id="collapseOne" class="accordion-body collapse in">
  •       class="accordion-inner">
  •         Anim pariatur ...
  •      
  •    
  •  
  •   class="accordion-group">
  • 2、JavaScript调用

    使用选项时,JavaScript调用折叠插件的格式为:

     
      
    1. $(".collapse").collapse(options)

    在调用collapse() 方法时,可以包含一个配置对象,该对象包含 parent 和 toggle 两个配置参数。如,通过以下JavaScript代码,即可实现折叠插件的交互行为和动态效果:

     
      

    除此之外,Bootstrap还为折叠插件提供了其它一些方法,可以根据需要选择使用。这些方法为:

    • .collapse('toggle'):让一个可折叠元素在显示和隐藏之间切换。
    • .collapse('show'):显示一个可折叠元素。
    • .collapse('hide'):隐藏一个可折叠元素。

      关于作者

      歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    你可能感兴趣的:(Bootstrap,教程)