学习资料：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. Vue学习之路---No.7（分享心得，欢迎批评指正）

    老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...

  2. 头文件limits—各个类型的数据的范围

    要想知道各个类型的数据如int.float.double.long等所能表示的范围,可以加上头文件<limits>,这些类型的范围都在类numeric_limits中定义了的. 类模板:t ...

  3. iOS开发之URLSession

    1.概述 n  NSURLSession是iOS7中新的网络接口,与NSURLConnection是并列的. n  当程序在前台时,NSURLSession与NSURLConnection大部分可以互 ...

  4. 《C++之那些年踩过的坑（三）》

    C++之那些年踩过的坑(三) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. [版权声明]转载请注明原文来自:h ...

  5. 移动web开发经验

    1. font-family: "Microsoft YaHei",sans-serif;/*第二个是手机的一个默认的字体 手机没有微软雅黑*/ 2.主流手机浏览器内核都为webk ...

  6. Tcl与Design Compiler （十三）——Design Compliler中常用到的命令（示例）总结

    本文如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/  ,作者:IC_learner 本文将描述在Design Compliler中常用 ...

  7. XJOI1657&Codevs1255搭积木【树状动规】

    搭积木 一种积木搭建方式,高为H的积木,最底层有M个积木,每一层的积木数是他的低一层的积木数+1或-1.总共有N个积木.(且每行积木数不超过10)比如上图N=13 H=6 M=2. 输入格式: 第一行 ...

  8. 在Activiti中如何使用自定义的组织架构

    1.概述 我们知道,activiti是一个不错的流程引擎,它有自身的人员组织架构,但仅限于用户.用户组的管理,流程产生的任务(UserTask),就涉及到任务的所属人(Owner),任务的执行人(as ...

  9. Java中一个方法只被一个线程调用一次

    1.想在运行时抛出异常,终止方法的运行 private final Set<Long> THREADS = new HashSet<>(); public void someM ...

  10. 关于WdatePicker.js的结束时间大于开始时间

    简单笔记 : WdatePicker.js 要使结束时间大于开始时间只要在线束时间的 minDate:'#F{$dp.$D(\'stimeParam\')}' 即可:不多说 详细代码如下: <t ...