bootstrap collapse 控件学习
来源:互联网 发布:中文.商城域名骗局 编辑:程序博客网 时间:2024/05/20 22:39
文章参考
http://v3.bootcss.com/javascript/#collapse-example-accordion
隐藏样式: .collapse hides content
效果样式: .collapsing is applied during transitions
关闭样式: .collapse.in shows content
测试代码:
<div class="collapse" id="collapseExample"> <div class="well"> dsafdsafdsafdsafdsaf </div></div>
备注:
1、如果class="collapse in"则是展开内容
2、内容的样式 class="well"
链接 触发
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href</a>
备注:重点是href="#collapseExample"属性
按钮 触发
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target</button>
备注:重点是aria-controls="collapseExample"属性
例子:
<!------------------------collapse 显示List列表--------------------------------><div class="panel-group" role="tablist"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="collapseListGroupHeading1"> <h4 class="panel-title" id="-collapsible-list-group-"> <a class="" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="true" aria-controls="collapseListGroup1"> Collapsible list group </a> <a class="anchorjs-link" href="#-collapsible-list-group-"><span class="anchorjs-icon"></span></a></h4> </div> <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="true"> <ul class="list-group"> <li class="list-group-item">Bootply</li> <li class="list-group-item">One itmus ac facilin</li> <li class="list-group-item">Second eros</li> </ul> <div class="panel-footer">Footer</div> </div> </div></div><!------------------------collapse分组--------------------------------><div class="panel-group" 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 class="panel-body"> Anim pariatur cliche reprehenderi </div> </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"> <div class="panel-body"> Anim pariatur cliche r </div> </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"> <div class="panel-body"> Anim pariatur cliche r </div> </div> </div></div>
备注:.panel-body
和 .list-group
可以相互替换
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as indata-parent=""
.
panel
class)togglebooleantrueToggles the collapsible element on invocationMethods
.collapse(options)
Activates your content as a collapsible element. Accepts an optional options object
.
$('#myCollapsible').collapse({ toggle: false})
.collapse('toggle')
Toggles a collapsible element to shown or hidden.
.collapse('show')
Shows a collapsible element.
.collapse('hide')
Hides a collapsible element.
Events
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
show
instance method is called.shown.bs.collapseThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).hide.bs.collapseThis event is fired immediately when the hide
method has been called.hidden.bs.collapseThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).$('#myCollapsible').on('hidden.bs.collapse', function () { // do something…})
- bootstrap collapse 控件学习
- Bootstrap Collapse
- Bootstrap插件collapse源码的学习
- bootstrap之collapse(折叠)
- bootstrap之collapse
- 【Bootstrap】选择折叠项collapse
- bootstrap 的 collapse 使用示例
- Bootstrap 折叠(Collapse)插件
- Bootstrap 折叠(Collapse)插件
- Bootstrap 折叠(Collapse)插件
- bootstrap tooltips控件学习
- bootstrap-如何在modal中使用collapse
- bootstrap的collapse事件,标签页事件
- Bootstrap简单认识之Collapse组件
- Bootstrap插件(七)——按钮(button.js)与collapse(collapse.js)
- Bootstrap的js插件之折叠(collapse)
- Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
- bootstrap折叠调用collapse()后data-parent不生效问题
- $.each() 遍历数组 和 JSON
- 擦擦擦擦擦擦擦擦擦擦擦擦擦擦擦
- 四种方案解决ScrollView嵌套ListView问题
- Informatica 安装 无法创建域
- 乐视VR与腾讯管家深度合作,打造VR
- bootstrap collapse 控件学习
- flipsnap 控件学习
- display : table table-row rable-cell
- html控件中设置两个样式渲染
- odoo之Qweb的一些参数
- CSS:span元素margin-top无效的根源
- Unity3d开发(十六) 重写UGUI组件
- 经典的01背包问题
- ASCII码排序