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', //生 ...
随机推荐
- Mysql初始化root密码和允许远程访问
mysql默认root用户没有密码,输入mysql –u root 进入mysql 1.初始化root密码 进入mysql数据库 1 mysql>update user set password ...
- django_restframework_angularjs
用Django Rest Framework和AngularJS开始你的项目 作者:Kevin Stone原帖:Getting Started with Django Rest Framework a ...
- WinForm------TreeList修改节点图标和按钮样式
转载: https://documentation.devexpress.com/#WindowsForms/DevExpressXtraTreeListTreeList_CustomDrawNode ...
- ArcGIS Server 10.1 for Linux典型问题总结
关闭开启server服务: [gis@localhost ArcGISServer]$ cd /home/gis/arcgis/server [gis@localhost server]$ ./sto ...
- OpenGL教程
http://www.opengl-tutorial.org/ http://www.lighthouse3d.com/ http://www.arcsynthesis.org/gltut/ http ...
- swiper 技巧
全屏广告高度 ,加上属性. html, body { position: relative; height: 100%; } 停止自行播放 mySwiper.stopAutoplay(); 锁住状态, ...
- Mac安装Brew
安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip ...
- Django笔记-登陆注册-1
1.项目结构(eclipse+PyDev工具)(粘上来后代码缩进格式没有了,就先不整了) 2.关键代码: test_log03.settings.py INSTALLED_APPS = ( 'djan ...
- ssh远程连接ubuntu
1. 首先在服务器上安装ssh的服务器端. $ sudo aptitude install openssh-server 2. 启动ssh-server. $ sudo /etc/init.d/ss ...
- ImageTragick Exploit & Fix
ImageMagick是一款广泛流行的图像处理软件,有无数的网站(国内国外都有)使用它来进行图像处理,本周二,ImageMagick披露出了一个严重的0day漏洞,此漏洞允许攻击者通过上传恶意构造的图 ...