Bootstrap学习总结笔记（22）-- 基本插件之折叠

最新推荐文章于 2019-05-27 17:11:01 发布
最新推荐文章于 2019-05-27 17:11:01 发布
阅读量581 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap 折叠插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kikaylee/article/details/53512018
版权

折叠（Collapse）插件可以很容易地让页面区域折叠起来。

0x01 例子

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>折叠插件</title>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>折叠插件</h1>
    </div>
    <div class="panel-group" id="panelGroup">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup">
                        折叠1
                    </a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup">
                        折叠2
                    </a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup">
                        折叠3
                    </a>
                </h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup">
                        折叠4
                    </a>
                </h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse">
                <div class="panel-body">
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

效果如下：

这里有个新的属性：data-parent ，用于把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

0x02 JS方式

也可以通过JS代码来动态显示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>JS代码</title>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>折叠插件</h1>
    </div>
    <div class="panel-group" id="panelGroup">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup">
                        折叠1
                    </a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup">
                        折叠2
                    </a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                </div>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup">
                        折叠3
                    </a>
                </h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                </div>
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup">
                        折叠4
                    </a>
                </h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse">
                <div class="panel-body">
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#collapse1").collapse({
            toggle:false
        });
        $("#collapse2").collapse({
            toggle:false
        });
        $("#collapse3").collapse({
            toggle:false
        });
        $("#collapse4").collapse({
            toggle:false
        });
    })
</script>
</body>
</html>

效果如下：

初始全部是折叠状态，因为toggle初始化均为false。

kikay
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap之折叠（Collapse）
qq_47043261的博客
07-28 1976
关于折叠的简单用法我在代码的注释里了写的比较清楚了，想要学习这个组件的小伙伴自己看吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折叠</title> <!-- 需要引入的样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&gt
【BootStrap】--折叠插件
慢慢的长大
09-14 1454
研究BootStrap的折叠插件的时候，发现这个东西很方便，即能显示标题，又能查看当前页的详细内容，很适合做新生入学系统公约显示功能
Bootstrap 折叠（Collapse）插件
Charge8的博客
02-02 4512
Bootstrap 折叠（Collapse）插件     折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 用法 Class 描述   .collapse 隐藏内容。   .collapse.in 显示内容。   .collapsing 当过渡效果开始时被添加，当过渡...
折叠的jquery插件
12-25 504
折叠的jquery插件
Bootstrap基本插件学习笔记之折叠(22)
11-30
折叠（Collapse）插件可以很容易地让页面区域折叠起来。 0x01 例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
Bootstrap基本组件学习笔记之input输入框组(9)
11-28
1. **响应式设计**：Bootstrap框架的核心特性之一，使网页能够自动适应不同的设备和屏幕尺寸。 2. **栅格系统**：Bootstrap的网格系统可以帮助你轻松地创建灵活的布局，通过`.col-*-*`类调整元素的宽度。 3. **表单...
web--bootstrap入门基础笔记
09-26
这个"web--bootstrap入门基础笔记"是专科计算机软件设计专业大二学生在一个月内通过32节90分钟课程学习的总结，适用于从零开始学习的初学者，同时也为有一定经验的开发者提供参考。 首先，Bootstrap的核心概念是...
bootstrap响应式网页作业tion-model-for-network-开发笔记
最新发布
06-25
Bootstrap响应式网页设计是当前构建动态、交互式网站的主流技术之一。在“bootstrap响应式网页作业tion-model-for-network-开发笔记”中，我们可以聚焦于Bootstrap框架如何与HTML结合，以实现网络应用的灵活布局和...
BootStrap-CSS样式_插件_折叠（Collapse）插件
LoveyourselfJiuhao的博客
01-05 1483
折叠（Collapse）插件  折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内 容面板，它都允许很多内容选项。  如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。还可以引用 bootstrap.js 或压缩版的 bootstrap.min.j...
jquery展开折叠插件.zip
07-04
jquery展开折叠插件
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
折叠菜单(点击展开层)
07-13
折叠菜单(js实现点击展开层适用于文字）
JS三级可折叠菜单实现方法
10-22
主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下
按钮和折叠插件
lql_h的博客
05-27 370
一．按钮 可以通过按钮插件创建不同状态的按钮。 //单个切换。 <button class="btn btn-primary" data-toggle="button" autocomplete="off">按钮</button> 注：在Firefox多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是：添加autocomplete="off"。 //...
Bootstrap 折叠（Collapse）插件使用且保证一级、二级菜单的选中状态
申谊的博客
01-31 3463
关于Bootstrap 折叠（Collapse）插件的基础使用见：http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html 要求： 1、二级菜单中任意一个选中，则一级菜单选中；未选中二级菜单，仅一级菜单的点击不算选中； 2、页面通过跳转进入相应的路径，则对应的一级、二级菜单也要实现选中状态； 实现方案： 1.监听$loc...
Bootstrap简单认识之Collapse组件
热门推荐
博客
03-02 1万+
Collapse（内容折叠）组件一、简介此组件可以将一篇区域收起、展开，类似折叠的效果。主要用于内容过多时，将部分内容折叠。二、样式 分析了这几个组件，发现Bootstrap喜欢将transition的持续时间设置为600ms 这个组件并没有什么特殊的样式，一共就几个： .collapse { display: none; &.show { display: block; }
Bootstrap折叠
前端小99的博客
03-22 614
&lt;div class="container"&gt;  &lt;h2&gt;简单的折叠&lt;/h2&gt;  &lt;p&gt;点击按钮内容会再显示与隐藏之间切换。&lt;/p&gt;  &lt;button type="button" class="btn btn-primary" data-toggle="collapse" da
Bootstrap-折叠方法
期待王教授
07-24 3094
今天做项目有一个功能是从表里加载某个班每个教师的获得的荣誉列表，想实现的是加载出该班的教师，点击教师是列出该教师的所有荣誉，再点击将荣誉折叠。最后用Bootstrap的折叠（Collapse）插件方法实现，这里记录一下。         【知识点】         1、Bootstrap         Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap
哪里可以找到 bootstrap-table-draggable-columns 插件
07-14
你可以在 GitHub 上找到 bootstrap-table-draggable-columns 插件。以下是该插件的 GitHub 页面链接： https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/draggable-columns 在该页面上，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值