BootStrap-CSS样式_插件_折叠（Collapse）插件

最新推荐文章于 2023-07-24 22:23:07 发布

有梦的小草

最新推荐文章于 2023-07-24 22:23:07 发布

阅读量1.4k

点赞数

分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_插件 BootStrap折叠（Collapse）插件

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/85811501

版权

BootStrap 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

折叠（Collapse）插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。还可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

创建可折叠的分组或折叠面板

1. data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。

2. href 或 data-target 属性添加到父组件，它的值是子组件的 id。

3. data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

用法

下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class

您可以通过以下两种方式使用折叠（Collapse）插件：

1. 通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。
2. 通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：

$('.collapse').collapse()

选项

//Options:.collapse(options) :激活内容为可折叠元素。接受一个可选的 options 对象
$('#identifier').collapse ({ 
    //toggle: true-折叠显示折叠组件 false- 展开显示折叠组件，默认展开
     toggle: true
}) 
//Show: .collapse('show'):显示可折叠元素
$('#identifier').collapse ('show') 
//Hide: .collapse('hide'):隐藏可折叠元素
$('#identifier').collapse ('hide') 
//Toggle:.collapse('toggle') :切换显示/隐藏可折叠元素
$('#identifier').collapse ('toggle')

事件

下表列出了折叠（Collapse）插件中要用到的事件。这些事件可在函数中当钩子使用

//show.bs.collapse:在调用 show 方法后触发该事件
$('#identifier').on('show.bs.coll apse', function () { 
  // 执行一些动作... 
}) 
//shown.bs.collapse :当折叠元素对用户可见时触发该事件（将等 待 CSS 过渡效果完成） 
$('#identifier').on('shown.bs.collapse', function () { 
  // 执行一些动作... 
})
//hide.bs.collapse:当调用 hide 实例方法时立即触发该事件
$('#identifier').on('hide.bs.coll apse', function () { 
 // 执行一些动作... 
}) 
//hidden.bs.collapse :当折叠元素对用户隐藏时触发该事件（将等 待 CSS 过渡效果完成
$('#identifier').on('hidden.bs.co llapse', function () { 
  // 执行一些动作... 
})

代码实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>折叠（Collapse）插件 </title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 
        .col-xs-1:栅格布局
        .col-xs-offset-1:栅格布局，向右移动一个单元格
        .nav:导航元素
        .nav-pills:呈现胶囊式导航菜单（Tab页）样式
        .nav-stacked样式：导航设置为堆叠(垂直)效果
    -->
    <div class="container col-xs-1 col-xs-offset-1" style="padding-top:20px">
        <ul class="nav nav-pills nav-stacked">
            <li><button class="btn-show btn btn-success">show</button></li>
            <li><button class="btn-hide btn btn-danger">hide</button></li>
            <li><button class="btn-toggle btn btn-info">toggle</button></li>
        </ul>
    </div>
    <!-- 
        .panel:面板组件 
        .panel-title:面板标题
        .panel-body:面板内容
        data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上
        href 或 data-target 属性添加到父组件，它的值是子组件的 id
        data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上
        .collapse:隐藏内容
        .collapse in:显示内容
        .collapsing:当过渡效果开始时被添加，当过渡效果完成时被移除
    -->
    <div class="container col-xs-9" style="padding:20px">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分</a>
                </h4>
            </div>
            <div id="collapseOne" class="collapse in">
                <div class="panel-body">
                    <h4>第一部分</h4>
                    <strong>collapseOne</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis officiis fugiat nostrum officia suscipit aspernatur error minima amet temporibus, tempore ipsum vitae sit fuga, sint expedita tenetur. Nesciunt, quod.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-target="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分</a>
                </h4>
            </div>
            <div id="collapseTwo" class="collapsing">
                    <div class="panel-body">
                        <h4>第二部分</h4>
                        <strong>collapseTwo</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis officiis fugiat nostrum officia suscipit aspernatur error minima amet temporibus, tempore ipsum vitae sit fuga, sint expedita tenetur. Nesciunt, quod.
                    </div>
                </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-target="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分</a>
                </h4>
            </div>
            <div id="collapseThree" class="collapse in">
                <div class="panel-body">
                    <h4>第三部分</h4>
                    <strong>collapseThree</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis officiis fugiat nostrum officia suscipit aspernatur error minima amet temporibus, tempore ipsum vitae sit fuga, sint expedita tenetur. Nesciunt, quod.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第四部分</a>
                </h4>
            </div>
            <div id="collapseFour" class="collapse in">
                <div class="panel-body">
                    <h4>第四部分</h4>
                    <strong>collapseFour</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis officiis fugiat nostrum officia suscipit aspernatur error minima amet temporibus, tempore ipsum vitae sit fuga, sint expedita tenetur. Nesciunt, quod.
                </div>
            </div>
        </div>
    </div>
</body>
<script>
        $(function () { $('#collapseFour').collapse({
        //toggle: true-折叠显示折叠组件 false- 展开显示折叠组件，默认展开
            toggle: true
        })});

    $(function(){
        //全部展开折叠组件
        $(".btn-show").click(function(){
            $("div[id*='collapse']").collapse("show");
        })
        //全部隐藏折叠组件
        $(".btn-hide").click(function(){
            $("div[id*='collapse']").collapse("hide");
        })
        //循环显示或隐藏折叠组件
        $(".btn-toggle").click(function(){
            $("div[id*='collapse']").collapse("toggle")
            .on("show.bs.collapse",function(){
                //JS折叠组件显示前执行事件
                console.log("show.bs.collapse");
            }).on("shown.bs.collapse",function(){
                //JS折叠组件显示后执行事件
                console.log("shown.bs.collapse")
            }).on("hide.bs.collapse",function(){
                //JS折叠组件隐藏后执行事件
                console.log("hide.bs.collapse")
            }).on("hidden.bs.collapse",function(){
                //JS折叠组件隐藏后执行事件
                console.log("hidden.bs.collapse")
            })
        })
    })
</script>
</html>

显示效果：

有梦的小草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-CSS样式_插件_折叠（Collapse）插件

折叠（Collapse）插件折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。还可以引用 bootstrap.js 或压缩版的 bootstrap.min.j...
复制链接

扫一扫

专栏目录