Bootstrap 实例 - 折叠（Collapse）插件方法

最新推荐文章于 2022-03-13 09:10:32 发布
最新推荐文章于 2022-03-13 09:10:32 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： # css
独学而无友，则孤陋寡闻。q群582951247
本文链接：https://blog.csdn.net/mp624183768/article/details/82141524
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>

        $(function () {
            $('#collapseThree').collapse('toggle');
            $('#collapseOne').collapse('hide');
            $('#collapseTwo').collapse('show');
            $('#collapseFor').collapse({toggle: false});

            $('#collapseTwo').on("show.bs.collapse",function () {
                alert("在调用 show 方法后触发该事件。");
            });
            $('#collapseTwo').on("shown.bs.collapse",function () {
                alert("当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。");
            });
            $('#collapseTwo').on("hide.bs.collapse",function () {
                alert("当调用 hide 实例方法时立即触发该事件。");
            });
            $('#collapseTwo').on("hidden.bs.collapse",function () {
                alert("当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。");
            });

        });

    </script>
</head>
<body>
<div class="panel-group" id="accordion">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
                点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
            lomo.
        </div>
    </div>
</div>

<div class="panel panel-success">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseTwo" data-parent="#accordion" data-toggle="collapse">
                点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
            lomo.
        </div>
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseThree" data-parent="#accordion" data-toggle="collapse">
                点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
            </a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
            lomo.
        </div>
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseFor" data-parent="#accordion" data-toggle="collapse">
                点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
            </a>
        </h4>
    </div>
    <div id="collapseFor" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
            lomo.
        </div>
    </div>
</div>
</div>


</body>
</html>

 

安果移不动
关注
专栏目录
bootstrap4-Collapse 折叠 酷炫特效
weixin_44540481的博客
01-16 2708
       一· 引用文件：CSS:  bootstrap.min                       js: 1. jquery-3.2.1.min                            2. bootstrap.min          简介：1.Collapse 类用于指定一个折叠元素 (实例中的 &lt;div&gt;); 点击按钮后会在隐藏与显示之间...
Bootstrap JavaScript插件：折叠内容插件 (collapse.js)
WangMin@汪末末
09-10 2478
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 折叠插件（collapse.js）可以很容易地让页面区域折叠起来。当列表菜单的条目特别多，而页面空间有限时，使用类似于手风琴的折叠菜单可以节约页面空间，方便用户浏览。 实例 .collapse 隐藏内容 .collapsing 在转换期间应用 .collapse.in显示内容 可以使用带有href属性的链接，或具有数据目标属性的按钮。在这两种情况下，都需要data-toggle=“collap
Bootstrap Table的官网例子
09-27
本人因为项目开发的需要，需要用到一个表格插件。于是看上了Bootstrap Table，官网只是给了一个例子，于是我把官网的代码给爬下来。在基础上进行自己的修改。如果有兴趣可以下载来看看，代码个官网的是一模一样的。
Bootstrap(四十四)
shi199434的博客
12-15 240
Bootstrap 折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用Transition（过渡）插件。或者，正如 Bootstrap 插件概览 一章中所提到，
vue2-collapse-Vue Collapse是一个灵活的内容切换插件，用于手风琴列表或任何其他有条件的内容呈现。-Vue.js开发
05-27
Vue折叠Vue.js 2插件允许开发人员创建非常自定义的手风琴列表。 这意味着自定义Accordio Vue非常灵活并且易于定制。Collapse Vue.js 2插件允许开发人员创建非常自定义的手风琴列表。 这意味着它非常灵活并且易于定制手风琴插件。 插件本身不为任何组件或元素提供任何样式。 唯一包含的css使用max-height和transition属性支持最基本的上下滑动动画。 对于需要创建自定义手风琴列表的开发人员来说，VueCollapse还是一个工具。 带有实时示例的文档安装
bootstrap 的 collapse 使用示例
我的英文站点：https://iorilan.medium.com/
02-09 2552
bootstrap 的 collapse 使用示例
vue-demo-collapse:显示演示的Vue组件和一个“显示代码”按钮来扩展源代码-Show source code
03-24
vue-demo-collapse 显示演示的Vue组件和一个“显示代码”按钮来扩展源代码 安装 $ npm install vue-demo-collapse 用法 创建一个组件，将您的演示传入，并将该演示的源代码包装在组件中。 < script > <!-- source code --> < / template > < / src - file > < / demo - collapse > </ script > import { Demo
Bootstrap 折叠（Collapse）插件用法实例详解
11-22
下面通过本文给大家介绍Bootstrap 折叠（Collapse）插件用法实例，一起看看吧！ 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 如果您想要...
Bootstrap3-example:这是一个入门项目，旨在帮助您开始使用Bootstrap 3
05-23
JavaScript 插件是Bootstrap 3中的另一个亮点，它们扩展了HTML和CSS的功能，如折叠（collapse）、滚动spy、工具提示（tooltip）和弹出框（popover）。通过引入必要的JS文件和触发相应的事件，开发者可以实现更丰富的...
BootStrap-CSS样式_插件_折叠（Collapse）插件
LoveyourselfJiuhao的博客
01-05 1497
折叠（Collapse）插件  折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内 容面板，它都允许很多内容选项。  如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。还可以引用 bootstrap.js 或压缩版的 bootstrap.min.j...
实用分屏软件，可以把屏幕分成4个窗口。
04-28
实用分屏软件，简单方便，可以把屏幕分成4个窗口。
bootstrap之collapse
xixi
11-13 696
一、前言这节介绍下collapse(手风琴)模块的源码实现。二、源码 /* ======================================================================== * Bootstrap: collapse.js v3.3.7(折叠/手风琴) * http://getbootstrap.com/javascript/#collapse
折叠面板（Collapse）
weixin_44543412的博客
05-28 7997
折叠面板（Collapse） 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年5 月28 日 折叠面板(Collapse) 折叠面板知识点的整理：Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容，控制内容的可见性。它是一个灵活的插件，使用少量的类（来自必需的过渡插件），以方便切换行为。 点击下面任何一个按钮，通过类更改...
Bootstrap 历练实例 - 折叠（Collapse）插件方法
adiking520110的博客
11-30 241
方法 下面是一些折叠（Collapse）插件中有用的方法： 方法描述实例 Options:.collapse(options) 激活内容为可折叠元素。接受一个可选的 options 对象。 $('#identifier').collapse({ toggle: false }) Toggle:.collapse('toggle') 切换...
Bootstrap 折叠（Collapse）插件
boonyaxnn的博客
03-21 2446
1、使用折叠（Collapse）插件可以创建可折叠的分组或面板accordion： Bootstrap 折叠（Collapse）插件 点我展开，再点我折叠。Bootstrap组件 Bootstrap中包含了丰富的Web组件，根据这些组件
bootstrap实现pc屏幕五等分
weixin_30877227的博客
09-30 339
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>屏幕五等分</title> <meta name="generator" content="EverE...
python测试开发django-188.Bootstrap折叠（Collapse）插件
qq_27371025的博客
03-13 345
前言 折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。 可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse） 以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle="collapse"都是必需的。 单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容
折叠div块儿功能示例（代码）
SAGGITARXM
08-07 1927
折叠div块儿功能示例（代码）： <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>折叠div块儿功能示例</title&g...
Bootstrap超大屏幕和页面标题
遇见更好的自己
06-12 1694
Bootstrap支持超大屏幕（jumbotron）,它可以增加标题的大小，并为登陆页面内容添加更多的外边距创建一个带有class.jumbotron的容器 除了更大的<h1>,字体的粗细font-weight被减为200px<div class="jumbotron"> <h1>欢迎页面</h1> <p><a class="btn btn-primary btn-lg" role="button"
Bootstrap折叠插件实例与功能详解
Bootstrap折叠（Collapse）插件是Twitter Bootstrap框架中的一个强大工具，它简化了在Web页面上实现内容折叠与展开的设计。这个插件的核心功能是帮助开发者创建易于管理的可折叠组件，如折叠导航菜单和内容面板，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安果移不动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值