文档章节

4.21、Bootstrap V4自学之路-----内容---折叠板

Asktao
 Asktao
发布于 2016/03/25 17:55
字数 1594
阅读 153
收藏 1

这个功能是以后很定必须用到的功能,之前不系统学习的时候,一知半解的拷贝它。

效果让人不是很满意。一定要把它拿下!

示例

点击下面的按钮,利用类的改变,显示或隐藏另一个元素:

  • .collapse 隐藏内容

  • .collapsing 在过渡过程中应用到

  • .collapse.in 显示内容

你可以使用带href属性的链接,或者使用带data-target属性的按钮。在两种情况下,data-toggle="collapse"都是必需的。


手风琴示例

扩展默认的折叠块行为,创建一个手风琴。

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        《div id="accordion" role="tablist" aria-multiselectable="true"》<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingOne"》这里面是菜单的条headingOne<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出发滚动效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"》<br>
        --| --|《div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"》这里是headingOne的正文内容。<br>
<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingTwo"》这里面是菜单的条headingOne<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出发滚动效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"》<br>
        --| --|《div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"》这里是headingTwo的正文内容。<br>
<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingThree"》这里面是菜单的条headingThree<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出发滚动效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"》<br>
        --| --|《div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree"》这里是正文内容。
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
</div>

PS:其实我对手风琴的样式还是很期待的。比如加个背景色啦。好在换一下 <a>标签的嵌套顺序,就可以实现点击背景触发手风琴效果。想想这个还是很开心。至于背景色,可能需要自己的去处理了。

易用性

确保给控件元素添加了aria-expanded属性。这个属性向屏幕阅读器明确定义了折叠块元素的当前的状态。如果折叠块元素默认是闭合的,它必须拥有一个 aria-expanded="false"值。如果你用.in类设置折叠块元素是打开的,在控件上设置 aria-expanded="true"即可。插件会根据折叠块元素是打开还是关闭着的,自动切换这个属性。

此外,如果控件元素只对准一个单个元素——即,data-target的值指向一个id选择器,你可以给这个控件元素添加额外的aria-controls属性,容纳这个折叠块元素的id。现代的屏幕阅读器以及类似的辅助技术利用这个属性向用户提供额外的快捷方式,以径直导航到折叠块元素本身。

用法

折叠插件使用一些类来处理折叠行为:

  • .collapse 隐藏内容

  • .collapse.in 显示内容

  • .collapsing 在过渡开始时加上,在过渡结束时移除。

这里类可以在_animation.scss中找到。

利用data属性

只要向一个元素添加data-toggle="collapse"以及data-target属性,就可以自动让这个元素成为可折叠元素。data-target属性接受一个CSS选择器,以应用折叠。确保向可折叠的元素添加.collapse类,如果你想让它默认打开,再添加类.in

为了给一个折叠块控件添加类似手风琴组的效果,还需要添加data属性data-parent="#selector"。可以参考下面的演示了解实践例子。

利用JavaScript

人为启用它:

$('.collapse').collapse()

选项

可以利用data属性或者JavaScript传递选项。如果用data属性,请把选项名追加到data-后面,比如说写成data-parent=""

名称 类型 默认值 描述
parent selector false 如果提供了一个选择器,然后当某个折叠块打开时,这个指定的父元素下面所有别的折叠块元素都将自动关闭。与传统的手风琴行为相似,这依赖于.panel类。
toggle boolean true 在调用中折叠块元素。

方法

.collapse(options)

将某块内容激活为一个可折叠的元素。接受一个可选的参数object

$('#myCollapsible').collapse({   toggle: false })

.collapse(‘toggle’)

切换一个可折叠元素打开或隐藏。

.collapse(‘show’)

显示一个可折叠元素。

.collapse(‘hide’)

隐藏一个可折叠元素。

事件

Bootstrap的折叠类为相关的回调函数提供了事件接口。

事件类型 描述
show.bs.collapse 当调用show实例方法时,会立即触发该事件。
shown.bs.collapse 当折叠块对用户来说可见时(需要等待CSS过渡完成),会触发该事件。
hide.bs.collapse 当调用hide实例方法时,会立即触发该事件。
hidden.bs.collapse 当折叠块对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。
$('#myCollapsible').on('hidden.bs.collapse', function () {
   // do something… 
})


© 著作权归作者所有

Asktao
粉丝 27
博文 99
码字总数 114189
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
439
0
4.12、Bootstrap V4自学之路-----组件---导航栏

基础 这些是你开始使用导航条之前需要知道的东西: 导航条要求一个包裹的以及一个配色方案类(可以是或者)。 当在一个导航条中使用多个组件时,必须用一些 对齐类 。 导航条以及它们的内容默...

Asktao
2016/03/24
86
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
157
1
1.1、Bootstrap V4自学之路------起步---介绍

如果快速建立bootstrap V4模板 DEMO敬上: <!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" conten......

Asktao
2016/01/25
177
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

升级到 v4 Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 当心!它在 flux 中...

Asktao
2016/03/26
332
0

没有更多内容

加载失败,请刷新页面

加载更多

一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器

一、前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 controll...

郑清
31分钟前
2
0
javascript-十六进制随机颜色

<script> // 编写一个函数,获得一个十六进制的随机颜色的字符串(如#20CD4F) // function randomColor(){ // var r = random(0,255).toString(16); // var g = random(0,255).toString(16......

ACKo
33分钟前
2
0
springBoot +mybatis 出现sql 语句在数据库可以查询到,但是赋值到实体类上就没有的情况?

1.不要老是反复查看自己是否写错了,为啥有的能出来有的出不来? 可以查看配置文件中是否配置全: 如果在application.yml 文件中是如下配置: mybatis: mapper-locations: classpath:mapp...

kuchawyz
46分钟前
2
0
正则表达式

一、RegExp对象 进行验证和查找的API 1、创建对象: (1)用/创建(直接量):var reg=/正则/ig,表达式固定不变时使用 (2)用new创建:var reg=new RegExp(‘正则’,‘ig’),表达式需要...

wytao1995
46分钟前
2
0
实战限流(guava的RateLimiter)

关于限流 常用的限流算法有漏桶算法和令牌桶算法,guava的RateLimiter使用的是令牌桶算法,也就是以固定的频率向桶中放入令牌,例如一秒钟10枚令牌,实际业务在每次响应请求之前都从桶中获取...

程序员欣宸
47分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部