bootstrap之collapse(折叠)
说这个之前我们可以看看bootstrap的官网对它的说明:http://v3.bootcss.com/javascript/#collapse
class为以下值时:
.collapse
hides content.collapsing
is applied during transitions.collapse.in
shows content
You can use a link with the href
attribute, or a button with thedata-target
attribute. In both cases, the data-toggle="collapse"
is required.
翻译下就是a标签用href,button标签用data-target来指定哪个折叠板id
看个简单的例子:
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target
</button>
<div class="collapse" id="collapseExample">这是折叠的内容
</div>
很好理解吧,就是点下按钮,会显示出折叠的内容,其中
data-toggle="collapse"就是给这个按钮绑定事件,
<a href="#collapseExample" role="button" class="btn btn-primary" data-toggle="collapse">Link with href</a>
在bootstrap 的 js 加载的时候他会【检索】到 属性中有 data-toggle 这样的标签。然后 会【绑定】事件到 这个标签的 href="" 属性的值,也就是 #collapseExample
就相当于在jquery 中写了这样一段代码
document.ready(function (){
//btn 这个对象是 有【触发】 弹出对话框的 对象
$("btn").click(function (){
//显示折叠面板
$(#collapseExample).toggle();
});
})
toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
经典使用:
<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 role="button" 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">第一个内容</div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingTwo"><h4 class="panel-title"><a class="collapsed" role="button" 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">第二个内容</div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingThree"><h4 class="panel-title"><a class="collapsed" role="button" 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">第三个内容</div></div></div>
</div>
效果图:
NO.1
NO.2
N0.3
很简单吧,多实践就好
bootstrap之collapse(折叠)相关推荐
- CSS实现bootstrap的Collapse动态折叠和展开时箭头图标
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标 bootstrap的折叠代码如下 <div class="accordion" id="ac ...
- element-plus 组件解析 - Collapse 折叠面板
element-plus 组件解析 - Collapse 折叠面板 1, 组件介绍 2,组件组成 3,组件实现 3.1,el-collapse 1,v-model="activeNames& ...
- 用timeline 时间线 和 Collapse 折叠面板做一个简单的时间轴
项目上有个时间轴功能,我看了一下element上有时间轴功能,不过有点太简单,我想改造一下这个时间轴,记录一下,用Timeline 时间线 和 Collapse 折叠面板,两个加起来做了一时间轴,当是 ...
- bootstrap中jquery插件——collapse折叠效果-手风琴效果
先来掌握collapse插件的基本用法,再慢慢深入实例. collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下: <a class="btn b ...
- 用bootstrap写一个折叠面板
1:创建一个html文件 2:选择语言 3:输入创建框架 4:导入bootstrap的css样式(没有的请去官网下载),可选择botstrap.min.css或者botstrap.css(min是压缩 ...
- elasticsearch collapse折叠聚合
目前经验:折叠只能用于筛选数据, 不能进行聚合,需要聚合,自己在内存中聚合 from elasticsearch import Elasticsearchdef query_2coll(index_n ...
- bootstrap 导航菜单 折叠位置_python测试开发django44.xadmin自定义菜单项
前言 xadmin后台的菜单项是放到一个app下的,并且里面的排序是按字母a-z排序,有时候我们需要划分多个项,需要自定义菜单列表,可以通过重写CommAdminView类实现. xadmin后台提供 ...
- html中collapse代码怎么写,面试题: 手写collapse(折叠组件)的css/html部分
做一个组件库不难 其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组件就完成60%以上了. ...
- bootstrap 导航菜单 折叠位置_教大家如何编写一个网页导航条
导航条简单地说就是对你整个网站模块的简单介绍,你可以直接点击导航条某一个按钮或板块便可进入其相应的界面,如:网页.新闻.贴吧等 .在企业网站上,导航条上常见的有:产品介绍,公司简介,最新产品,联系我们 ...
最新文章
- SQL 实用基础代码
- 高科技的计算机作文,高科技的作文范文400字
- 张雪峰计算机科学与技术学什么,张雪峰看好的三大专业是什么 前景好的专业...
- 前端可视化编程:liveReload安装,sublime 3
- 采取监测记录网络运行状态_广播播控监测自动化系统改造探析
- 聊聊Code Review
- ubuntu安装tensorflow-gpu 和pytorch
- Linux内存管理之内存管理单元(MMU)(二)
- MySQL学习笔记三: 1. 多表查询 2. 事务 3. DCL
- 线性回归(一元多元)建模步骤
- javascript错误处理与调试(转)
- HBase在共享经济互联网业务的应用
- cudnn7.6.5下载 solitairetheme8_233小游戏下载安装赚钱-233小游戏下载安装最新版v2.29.4.5...
- maven打包,java内存竟然要设置16G(-Xmx16384m)
- php json schema,json-schema-php
- autojs- 联众识别
- 老司机带你用python爬取妹子图,接稳这波福利
- VSCODE mac版下载慢解决办法
- 利用vbs 运行程序 并使窗口隐藏
- IT界 PK 投资界,那些令人心驰神往的公司食堂