学习资料：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. 用shell实现linux系统应用文件清理工具

    用shell实现linux系统文件清理工具 1:原始需求 在系统运维中,会产生大量应用备份文件.落地文件等,这些文件需要定时清理.一般来说,都是使用crontab 拉起一个脚本来清理.类似这样: 30 ...

  2. PHP之流程的控制

       在一个公司中,员工肯定会有高层.中层和普通员工的,这样如果在某个公司员工遇到某种问题,需要请假.或者提一些请求的时候,就会需要去申请,申请的时候有的是可以直接和上级申请的,有时比较重要的事情,是 ...

  3. Centos下PXE+Kickstart无人值守安装操作系统

    一.简介 1.1 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持 ...

  4. 细心！SQL语句进行运算时使用字符串时缺失精度的细节！

    昨天没有更新,特此来说明下原因,昨天回到家时已经甚晚,正逢公司这几天项目比较紧张(bug多,赶需求,看着bug单齐刷刷的转过来,心都颤抖了一下),没有及时准备素材,今天又加了一天班(现在还在公司,偷个 ...

  5. 开源 & 免费使用 & 打包下载自行部署 ：升讯威 周报系统

    这个周报系统大约写于2015年,缘起当时所带的开发团队需要逐步建立或完善一些项目管理方法. 在调研了网上的诸多项目管理或周报/日报管理系统之后,并没有找到符合当时情况的系统,这里最大的问题不是网上既有 ...

  6. Unity3D动态读取外部MP3文件给AudioSource

    在PC端VR游戏开发中,需要动态加载本地的MP3文件,但是Unity3D不知道出于什么原因,到5.4.0也不支持MP3文件的外部加载(目前只支持wav和ogg). 因此要想通过www来加载mp3文件就 ...

  7. TCP/IP、HTTP、Socke、UDP的区别

    一.TCP/IP.Http.Socket的区别 [http://jingyan.baidu.com/article/08b6a591e07ecc14a80922f1.html](http://jing ...

  8. 获取VB类模块成员函数指针(转)

    最近在做一些VB6.VBA的项目,被如何获取类模块中的函数指针这个问题所困扰,收集整理后,有2分资料值得收藏,特将关键部分留存,以备后续查找. 参照连接1:http://www.cnblogs.com ...

  9. Java集合常见面试题集锦

    1.介绍Collection框架的结构 集合是Java中的一个非常重要的一个知识点,主要分为List.Set.Map.Queue三大数据结构.它们在Java中的结构关系如下: Collection接口 ...

  10. jdk源码剖析：Synchronized

    开启正文之前,先说一下源码剖析这一系列,就以"死磕到底"的精神贯彻始终,最少追踪到JVM指令(再往下C语言实现了). =========正文分割线===========  Sync ...