学习资料：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. python常见的特异点

    编码问题 Python中默认的编码格式是 ASCII 格式,在没修改编码格式时无法正确打印汉字,所以在读取中文时会报错.解决方法为只要在文件开头加入 # -*- coding: UTF-8 -*- 或 ...

  2. PDCA循环原理

    1.PDCA循环原理:plan  do  check action 以pdca质量环模型为质量控制和保证的理论依据,对软件质量进行把控. plan计划阶段:项目质量规划 1.分析现状,找出质量问题 2 ...

  3. php从气象局获取天气预报并保存到服务器

    思路:1.打开网页时读取中国气象网的接口得到每个城市的该日json:2.解析并保存到mysql:3.客户端访问mysql得到数据集. 所包含的技巧: 进度条.flush()问题.mysql.xml.p ...

  4. Android-自定义控件之时针-霞辉

    注释已经比较详细了,废话就不多说了.贴代码了 时针分针秒钟都做上去了,采用的方法也很简单,仔细看一会就能看懂 自定义View类 package com.xh.mytime; import java.u ...

  5. UNIX基础上

    时光飞逝,转眼已经毕业快2年了,觉得自己学的东西多却不精.对此深深的思考一下,觉得有必要连载unix环境编程文章,以此激励自己学习.在此立贴为证,2天一篇博客从零开始阐述unix的环境编程. 参考书籍 ...

  6. laravel资源路由详解

    大概挑两条解释. 我定义了个资源路由Route::resource('article', 'ArticleController');. 当我访问地址ArticleController的http://y ...

  7. webpack点滴记录

    有了webpack..(不借助gulp/grunt)代码压缩 图片base64,解析less/sass coffee css压缩,MD5加密都帮你做了..还支持按需加载..还有热替换 webpack常 ...

  8. 大数据测试之Hadoop的基本概念

    poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标,也是国内最早探索大数据测试培训的机构,开发了独有的课程体系.如果对课程感兴趣,请大 ...

  9. AndroidAnnotations框架简单使用方法

    当我们配置好了框架后,那么久可以来使用了.使用教程网上一大堆,官方也有提供!!!可自行学习深造.下面我简单的贴出几个常用的方法,作为HelloWorld入门: @EActivity(R.layout. ...

  10. Android使用Path实现仿最新淘宝轮播广告底部弧形有锯齿的问题以及解决办法

    在前面一篇博文<Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程>中已经基本介绍了实现轮播广告的基本思路和过程,但是仔细观察淘宝的轮播广告栏,发现在轮播广告栏的底部有个小小的 ...