学习资料：Bootstrap折叠（Collapse）插件

大家可能常见的都是类似：

这种的效果，小颖今天要给大家分享一个不一样的效果嘻嘻。铛铛铛铛............................

这个想实现的是，默认显示一部分内容，当点击下拉图标后，下面的内容也显示出来，其实小颖只是把官网中的 class名为：collapse的部分和 data-toggle="collapse" 部分的位置做了交换。下面我们一起来看看代码吧：

html：

<body>

    <div class="list-accordion">

        <div class="panel-group" id="accordion">

            <div class="panel panel-default">

                <div class="panel-content">

                    <div class="require-list">苹果</div>

                    <div class="require-list">香蕉</div>

                    <div class="require-list">榴莲</div>

                    <div class="require-list">提子</div>

                </div>

                <div id="collapseOne" class="panel-collapse collapse">

                    <div class="panel-body content-down">

                        <div class="require-list">青芒/贵妃芒</div>

                        <div class="require-list">西瓜</div>

                        <div class="require-list">草莓</div>

                        <div class="require-list">火龙果</div>

                    </div>

                </div>

                <div class="panel-heading">

                    <a id="move" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

                        <span id="glyphiconMove" class="glyphicon glyphicon-chevron-down"></span>

                    </a>

                </div>

            </div>

        </div>

    </div>

</body>

js：

<script type="text/javascript">

    $(function() {

        $("#move").click(function() {

            if ($("#glyphiconMove").hasClass("glyphicon-chevron-down")) {

                $("#glyphiconMove").removeClass("glyphicon-chevron-down");

                $("#glyphiconMove").addClass("glyphicon-chevron-up");

            } else {

                $("#glyphiconMove").removeClass("glyphicon-chevron-up");

                $("#glyphiconMove").addClass("glyphicon-chevron-down");

            }

        });

    });

</script>

Bootstrap之折叠（Collapse）插件的更多相关文章

  1. BootStrap中的collapse插件堆叠效果

    通过网络上的一系列查找,总结出的collapse插件堆叠效果(网上没有找到,只能自己弄了,帮助那些和我遇到一样状况的同学) 首先感谢一位网友的知识总结给了我灵感,在这里先帮他推荐一波(https:// ...

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

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

  3. 折叠Collapse插件

    实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...

  4. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

  5. 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  6. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  7. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  8. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  9. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  10. bootstrap学习以及其插件

    Bootstrap中文网地址,里面有bootstrap组件的下载与使用说明,现在使用bootstrap3: http://www.bootcss.com/ W3CSchool.CC里面有学习boots ...

随机推荐

  1. Linux系统启动过程详解

    启动第一步--加载BIOS当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬盘 ...

  2. Hive（笔记）

    (2015.07.22Hive笔记) 一.Hive的安装 1.1Hive的安装过程 下载hive源文件(apache-hive-0.14.0-bin.tar.gz ) 解压hive文件 进入$HIVE ...

  3. The 15th UESTC Programming Contest Preliminary G - GC?(X,Y) cdoj1564

    地址:http://acm.uestc.edu.cn/#/problem/show/1564 题目: G - GC?(X,Y) Time Limit: 3000/1000MS (Java/Others ...

  4. apache和nginx原理上的不同之处

    今天群里提到面试时问到apache和nginx原理有什么不同,一时还真没想起,想到的只是他们的优缺点,便搜索了下.记录学习下.顺便记录下优缺点吧. 原理不同之处: 为什么Nginx的性能要比Apach ...

  5. css3圆环闪烁动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Weblogic虚拟目录

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...

  7. Realm数据持久化方案的简单介绍和使用（二）

    接上篇... 4. 可空属性&默认值&忽略属性 默认情况下, 属性值可空, 如果强制要求某个属性非空, 可以使用如下方法: 遵循协议方法 + (NSArray *)requiredPr ...

  8. 手机自动化测试：appium问题解决

    手机自动化测试:appium问题解决   Appium遇到问题: 问题一:问题org.openqa.selenium.remote.UnreachableBrowserException: Could ...

  9. MySQL flashback 功能

    1. 简介 mysqlbinlog flashback(闪回)用于快速恢复由于误操作丢失的数据.在DBA误操作时,可以把数据库恢复到以前某个时间点(或者说某个binlog的某个pos).比如忘了带wh ...

  10. Shiro基础学习(一)—权限管理

    一.基本概念 1.权限管理      只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源.     权限管理 ...