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的更多相关文章

  1. bootstrap插件学习-bootstrap.collapse.js

    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...

  2. Bootstrap Collapse使用

    参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse http://www.w3resource.com/twi ...

  3. bootstrap collapse MVC .net漂亮的折叠List

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  4. bootstrap collapse 无法收回

    $(function () { //修复collapse不能正常折叠的问题 $(".collapsed").click(function () { var itemHref = $ ...

  5. Bootstrap源码分析之nav、collapse

    导航分析(nav): 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是 ...

  6. [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 ...

  7. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  8. bootrap 手风琴Collapse源码分析

    /* ======================================================================== * Bootstrap: collapse.js ...

  9. yii2 利用小部件生成后台左边菜单栏

    ************   模型层递归查询权限   ************ /**     * 递归方式查询权限     */    public function getPrivilege()  ...

  10. Gruntfile.js模板

    module.exports = function(grunt) { // 配置项 var AppConfig = { name: 'app', //源文件目录 src: 'app/src', //生 ...

随机推荐

  1. Mysql初始化root密码和允许远程访问

    mysql默认root用户没有密码,输入mysql –u root 进入mysql 1.初始化root密码 进入mysql数据库 1 mysql>update user set password ...

  2. django_restframework_angularjs

    用Django Rest Framework和AngularJS开始你的项目 作者:Kevin Stone原帖:Getting Started with Django Rest Framework a ...

  3. WinForm------TreeList修改节点图标和按钮样式

    转载: https://documentation.devexpress.com/#WindowsForms/DevExpressXtraTreeListTreeList_CustomDrawNode ...

  4. ArcGIS Server 10.1 for Linux典型问题总结

    关闭开启server服务: [gis@localhost ArcGISServer]$ cd /home/gis/arcgis/server [gis@localhost server]$ ./sto ...

  5. OpenGL教程

    http://www.opengl-tutorial.org/ http://www.lighthouse3d.com/ http://www.arcsynthesis.org/gltut/ http ...

  6. swiper 技巧

    全屏广告高度 ,加上属性. html, body { position: relative; height: 100%; } 停止自行播放 mySwiper.stopAutoplay(); 锁住状态, ...

  7. Mac安装Brew

    安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip ...

  8. Django笔记-登陆注册-1

    1.项目结构(eclipse+PyDev工具)(粘上来后代码缩进格式没有了,就先不整了) 2.关键代码: test_log03.settings.py INSTALLED_APPS = ( 'djan ...

  9. ssh远程连接ubuntu

    1. 首先在服务器上安装ssh的服务器端. $ sudo aptitude install openssh-server 2. 启动ssh-server. $  sudo /etc/init.d/ss ...

  10. ImageTragick Exploit & Fix

    ImageMagick是一款广泛流行的图像处理软件,有无数的网站(国内国外都有)使用它来进行图像处理,本周二,ImageMagick披露出了一个严重的0day漏洞,此漏洞允许攻击者通过上传恶意构造的图 ...