方法

下面是一些折叠（Collapse）插件中有用的方法：

方法 描述 实例
Options:.collapse(options) 激活内容为可折叠元素。接受一个可选的 options 对象。 
$('#identifier').collapse({

  toggle: false

})
Toggle: .collapse('toggle') 切换显示/隐藏可折叠元素。 
$('#identifier').collapse('toggle')
Show: .collapse('show') 显示可折叠元素。 
$('#identifier').collapse('show')
Hide: .collapse('hide') 隐藏可折叠元素。 
$('#identifier').collapse('hide')

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 历练实例 - 折叠（Collapse）插件方法</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div class="panel-group"id="accordion">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne"data-toggle="collapse"data-parent="#accordion">点击我展开，再次点击我折叠，第一部分hide方法。 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
这场罕见的危机将往何处走？华盛顿近东政策研究所土耳其研究项目主任恰阿普塔伊在CNN网站撰文说，此次事件使俄土两国自一战后首次濒临直接冲突，虽然战争有望避免，莫斯科无疑希望让土耳其为“背后一刀”付出代价。普京一直将俄罗斯视为全球军事大国，因此他不会让安卡拉破坏其目标。预计俄罗斯将双管齐下，“惩罚”安卡拉，并向他国发出信号：与俄罗斯作对是多么危险。随着俄防空导弹部署在叙土边境地区，不排除危机升级。《纽约时报》等媒体在报道中也强调：俄罗斯S-400防空导弹已经部署在距土耳其边界仅50公里的叙利亚空军基地，俄军警告将会击落任何对其战机构成潜在威胁的空中目标。
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTwo"data-toggle="collapse"data-parent="#accordion">
点击我展开，再次点击我折叠，第二部分show方法。
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
土耳其《晨报》称，在土空军击落俄战机加剧两国紧张后，土耳其28日向土叙边境地区增派坦克、装甲车和其他武器装备。不过，美国《外交政策》杂志分析称，莫斯科和安卡拉对彼此关系下的赌注都不在军事层面，虽然双方都秀肌肉，但军事摊牌不符合两国利益，土耳其的西方盟友已经开始协助“降火”。
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree"data-toggle="collapse"data-parent="#accordion">点击我展开，再次点击我折叠，第三部分toggle方法。</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
一名在俄多年的中国学者对《环球时报》记者说，目前俄罗斯民众的情绪已经被充分点燃，俄土关系短期内不会恢复。经济制裁不过是一种表面上“需要摆出的姿态”，一是对民众有个交代，二是让土耳其知道必须为自己行为承担责任。普京的真实意图是化被动为主动，充分利用“紧张的俄土关系”完成为俄中东战略排兵布阵的历史使命，并在叙利亚取得更多军事优势。
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseFour"data-toggle="collapse"data-parent="#accordion">点击我展开，再次点击我折叠，第四部分options方法。</a></h4>
</div>
<div id="collapseFour"class="panel-collapse collapse">
<div class="panel-body">
德国《明镜》周刊29日刊发的独家调查称，俄罗斯为支持巴沙尔政权，已在叙利亚境内部署了地面部队和防空武器，俄军还动用自己的军用飞机将叙政府军运至作战地区。报道称，两名俄特种部队士兵已经在叙利亚阵亡。法新社援引观察组织的话称，叙利亚西北部至少18名平民29日死于“可能来自于俄罗斯战机的轰炸”。以色列国防部长亚阿隆当天则表示，俄罗斯一架战机近日曾从叙利亚闯入以色列控制的戈兰高地上空1.6公里，不过没有发生意外事件。
</div>
</div>
</div>
</div>
</div>
<script>
$(function () { $("#collapseOne").collapse("hide"); });
$(function () { $("#collapseTwo").collapse("show"); });
$(function () { $("#collapseThree").collapse("toggle"); });
$(function () { $("#collapseFour").collapse({ toggle: false }) });
//$(document).ready(function () {
// $("#collapseOne").collapse("hide");
// $("#collapseTwo").collapse("show");
// $("#collapseThree").collapse("toggle");
// $("#collapseFour").collapse({toggle:false})
//})
</script>
</body>
</html>

Bootstrap 历练实例 - 折叠（Collapse）插件方法的更多相关文章

  1. Bootstrap 历练实例 - 折叠（Collapse）插件事件

    事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...

  2. Bootstrap历练实例：popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

  3. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  4. Bootstrap历练实例：警告框(Alert)插件的方法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap历练实例：下拉菜单插件方法的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  7. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  8. Bootstrap 历练实例 - 按钮（Button）插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

  9. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

随机推荐

  1. 8、kvm虚拟机添加硬盘

    kvm虚拟机添加硬盘qemu-img创建一块新的硬盘 qemu-img create -f qcow2 /kvm-data/kvm/jumperhost_disk1.qcow2 50G 关闭虚拟机 v ...

  2. Python Unittest - Test Fixtures 测试夹具

    一.什么是测试夹具 定义单个或者多个测试所需的环境准备(setUp),以及环境清理(tearDown). 例:连接数据库,或者创建Selenium WebDriver driver实例 二.测试夹具有 ...

  3. CollectionUtils.select 集合筛选

    import org.apache.commons.collections.CollectionUtils;import org.apache.commons.collections.Predicat ...

  4. 读书笔记 - 《梦想与浮沉：A股十年上市博弈》

    拿到这本书是个很偶然的事件.有几本软件业书由于太老已经绝版,偶然想到小区的图书馆自动借阅机和读者证的预借功能,就兴冲冲的跑去尝试.没想到预借只能在网页上进行,就随手从机器里借了这本书.没想到细观之下让 ...

  5. ElasticSearch 全文检索— ElasticSearch概述

    ElasticSearch 产生背景 1.海量数据组合条件查询 2.毫秒级或者秒级返回数据 Lucene 定义 lucene是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一 ...

  6. JavaFX常用汇总

    1. 描述备注 1.1 参考教程 博客 易百教程 JavaFX中国 1.5 安装 a). 在线安装e(fx)clipse插件 b). 下载安装SceneBuilder c). eclipse重启以后, ...

  7. phpcms如何调用某一组图里的所有图片

    {pc:get sql="select * from v9_picture_data where id = '$id'"} {loop $data $n $r} {loop str ...

  8. Shell笔试题3

    1.查找当前目录中所有大于500M的文件,把这些文件名写到一个文本文件中,并统计其个数.find ./ -size +500M -type f | tee file_list | wc -l 2.在目 ...

  9. Toad for Oracle针对于Oracle数据库的可视化管理工具使用

    Toad for Oracle安装包下载地址:http://pan.baidu.com/s/1mgBOLZU 在Oracle应用程序的开发过程中,访问数据库对象和编写SQL程序是一件乏味且耗费时间的工 ...

  10. SQL海量数据读写性能优化

    这是给某数据中心做的一个项目,项目难度之大令人发指,这个项目真正的让我感觉到了,商场如战场,而我只是其中的一个小兵,太多的战术,太多的高层之间的较量,太多的内幕了.具体这个项目的情况,我有空再写相关的 ...