bootstrap-collapse
colapse插件:折叠功能
插件:collapse.js
实现方法:以data-toggle做被点击者,以div class="collapse in"显示展开内容
<script src="../extlib/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../extlib/bootstrap-3.3.5-dist/js/collapse.js" type="text/javascript" charset="utf-8"></script>
<script src="../extlib/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../extlib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<!-- data-toggle="collapse"不可缺少 -->
<!-- class="collapse in" 也不可缺少 -->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#zhedie" class="btn" data-toggle="collapse">点击我显示折叠内容</a>
<div id="zhedie" class="collapse in">
<ul>
<li><a href="#showContent1">显示内容1</a></li>
<li><a href="#showContent2">显示内容2</a></li>
</ul>
</div> </div>
</div>
</div>
显示效果:
bootstrap-collapse的更多相关文章
- bootstrap插件学习-bootstrap.collapse.js
先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...
- Bootstrap Collapse使用
参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse http://www.w3resource.com/twi ...
- bootstrap collapse MVC .net漂亮的折叠List
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...
- bootstrap collapse 无法收回
$(function () { //修复collapse不能正常折叠的问题 $(".collapsed").click(function () { var itemHref = $ ...
- Bootstrap源码分析之nav、collapse
导航分析(nav): 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是 ...
- [Bootstrap] 8. 'Collapse', data-target, data-toggle & data-parent
Using Bootstrap JavaScript Plugins If we want to add behavior to our website, which of the following ...
- 第二百四十七节,Bootstrap按钮和折叠插件
Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...
- bootrap 手风琴Collapse源码分析
/* ======================================================================== * Bootstrap: collapse.js ...
- yii2 利用小部件生成后台左边菜单栏
************ 模型层递归查询权限 ************ /** * 递归方式查询权限 */ public function getPrivilege() ...
- Gruntfile.js模板
module.exports = function(grunt) { // 配置项 var AppConfig = { name: 'app', //源文件目录 src: 'app/src', //生 ...
随机推荐
- IOS - 打印COOKIE中的 CRFSToken
NSHTTPCookie 在iOS中使用NSHTTPCookie类封装一条cookie,通过NSHTTPCookie的方法读取到cookie的通用属性. - (NSUInteger)version; ...
- 修改/etc/profile导致常用命令不可用的解决办法
原因:/etc/profile文件修改有误 解决办法: 用/usr/bin/vim /etc/profile进入,进去后修改正确/etc/profile,然后重启机器让该文件生效即可.
- JS-鼠标经过显示二级菜单
在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class=&quo ...
- 将文件路径以"\"隔开
将文件路径以"\"隔开,这货搞了我一小时...C++返回一维数组,字符串数组还是要再看看 ]) { ; //string s_array[30]; //局部变量,如果使用retur ...
- jquery 获取 json文件内容后,将其内容显示到 下拉列表框中,再将下拉列表中的内容,显示到文本框中
<script type="text/javascript"> $(function(){ $("#huoqv").click(function() ...
- 动态规划 求解 Minimum Edit Distance
http://blog.csdn.net/abcjennifer/article/details/7735272 自然语言处理(NLP)中,有一个基本问题就是求两个字符串的minimal Edit D ...
- oc面向对象特性: 多态
多态:不同对象以自己的方式响应相同的消息的能力叫做多态. 多态的主要好处就是简化了编程接口.在类与类之间可以重复命名. 下面的例子是一个彩色打印机和黑白打印机这两种打印机,然后Person类中有一 ...
- 几个有用的JavaScript/jQuery代码片段(转)
1. 检查数据是否包含在Array中 //jQuery实现 jQuery.inArray("value", arr); // 使用方法: if( jQuery.inArray(&q ...
- 单点登录(SSO)系统的总结
前些天一位其他开发部门的同事找到我们了解一些关于SSO单点登录的事,他们要做单点登录,同时也需要和我们这边的系统做集成,要我帮忙做一单点登录,了解关于单点登录的解决方案和资料,虽然做单点登录已经很久了 ...
- 事务环境下的CombGuid
一直使用osharp,osharp3使用的是combguid,代码如下 /// <summary> /// 返回Guid用于数据库操作,特定的时间代码可以提高检索效率 /// </s ...