zoukankan      html  css  js  c++  java
  • bootstrap collaspe

    和modal类似:也是通过data-toggle, data-target来指定;

    可以把折叠插件改为手风琴,如果指定data-parent,那这个data-parent元素下的折叠插件就会像手风琴一样,打开一个,其他的都关了。

    每个折叠元素的id都是需要的。

    添加- + *,来实现折叠,展开,删除的功能

    简单地折叠

    两个触发方式
    
    1、href:data-toggle='collapse' href='#collapseCon' aria-expended='false' aria-controls='collapseCon'
    
    2、data-target:data-toggle='collapse' data-target='#collapseCon' aria-expended='false' aria-controls='collapseCon' 
    
    容器为#collapseCon,
    
    class有三种情况
    
    1、collapse: 隐藏内容
    
    2、collapsing:动画
    
    3、collapse in:展示内容
    

    手风琴的例子:使用href;如果指定data-parent,那这个data-parent元素下的折叠插件就会像手风琴一样,打开一个,其他的都关了。

    也可以使用.list-group代替panel-body

    aria-expended的作用:

    如果默认关闭,则aria-expended=false;

    如果默认打开,则aria-expended=true;

    aria-control指向容器

    这两个属性都是为了屏幕阅读器和其他敏感设备

    使用js激活

    .collapse('toggle');

    .collapse('show');

    .collpase('hide');

    事件

    $('#cc').on('hidden.bs.collapse', function(){

    })

    show.bs.collapse

    shown.bs.collapse

    hide.bs.collpase

    hidden.bs.collapse

    碰到一个奇怪的问题:

    刚开始collapse,执行.collapse('hide'),则会打开;

    这种情况,如果给show和hide加断点,则会先show,再hide。

    过程奇怪,结果也奇怪。

      

  • 相关阅读:
    (转)expfilt 命令
    (转)第二十三节 inotify事件监控工具
    数据结构之平衡二叉树(AVL)
    安装apache2.4.10
    centos下编译安装mysql5.6
    随机 I/O & 顺序 I/O
    什么是mysql中的元数据
    linux中mail函数不能发送邮件怎么办
    检测MYSQL不同步发邮件通知的脚本
    mysql自动备份策略
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4833831.html
Copyright © 2011-2022 走看看