注册有礼
您现在的位置是：群英 > 开发技术 > web开发
Bootstrap如何实现手风琴效果，详细步骤是什么
Admin发表于 2022-05-07 17:06:401424 次浏览
这篇文章主要给大家介绍“Bootstrap如何实现手风琴效果，详细步骤是什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“Bootstrap如何实现手风琴效果，详细步骤是什么”文章能对大家有所帮助。

本篇文章给大家详细介绍一下Bootstrap中的手风琴效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。当单击一个触发元素时，在另外一个可折叠区域进行显示或隐藏，再次单击时可以反转显示状态。经典的场景是多个折叠区域的手风琴风格以及单一title/content的风格。

结构

手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel面板，如下边效果所示，有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group，也就是手风琴的结构

简单点就是一个触发器和一个折叠区 

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button>
<div id="demo" class="collapse in">折叠区</div>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">标题一对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">标题二对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">标题三</a></h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">标题三对应的内容</div>
        </div>
    </div>
</div>

声明式触发

触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。接下来我们来看一个简单的示例

第一步：设计一个面板组合，里面有三个折叠区

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
</div>

第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二部分是面板内容，也就是折叠区，使用 panel-collapse 样式

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">标题一</h4>
    </div>
    <div class="panel-collapse">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

第三步：为了把标题和内容区捆绑在一起，可以通过锚链接的方法，把标题区域和面板区连在一起

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
        </div>
        <div class="panel-collapse" id="panel1">
            <div class="panel-body">折叠区内容...</div>
        </div>
    </div>
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel2">标题二</a></h4>
        </div>
        <div class="panel-collapse" id="panel2">
            <div class="panel-body">折叠区内容...</div>
        </div>
    </div>
    ......
</div>

第四步：控制面板内容区是否可视。在Bootstrap框架中，如果想让内容区域不可见，只需要在 panel-collapse 样式上添加 collapse；如果想让内容区域默认可见，则需要添加样式collapse和in

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

第五步：激活手风琴交互行为。要完成交互行为，需要在标题链接中自定义两个属性，一个是data-toggle，并且取值为collapse；另一个是data-target，取值为各个面板内容区的标识符，比如说ID，在这个例子分别是#panel1、#panel2和#panel3：

[注意]在这个案例中不加入data-target="#panel1"也可以，因为前面已经有了href="#panel1"，但如里是button按钮作为触发器就必须使用data-target="#panel1"语句

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse in" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

第六步：定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果所单击区域是展示的，则会关闭）。这个data-parent取值与手风琴面板容器的标识符相匹配，比如这个例子是指 #myAccordion

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
            </h4>
        </div>
…

通过以上6步，可以总结出以下要点

　　 使用 panel 的 panel-title 作为触发元素，使用panel-body的父元素作为折叠区；

　　 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果；

　　 每个 panel 里的触发元素都要指定data-parent属性，data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符；

　　 触发元素需要指定 data-toggle，并且值为 collapse；

　　 触发元素需要指定 data-target属性， data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符；如果是a元素，可以指定href属性替代

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel1">标题一</a></h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">折叠区内容一</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容二</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容三</div>
        </div>
    </div>
</div>

JS触发

【关键字】

$(element).collapse('show');//显示折叠区域
$(element).collapse('hide');//隐藏折叠区域
$(element).collapse('toggle');//反转折叠区域
<button type="button" class="btn btn-default" id="btn1">显示折叠区域</button>
<button type="button" class="btn btn-default" id="btn2">隐藏折叠区域</button>
<button type="button" class="btn btn-default" id="btn3">反转折叠区域</button>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel1">标题一</a></h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">折叠区内容一</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容二</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容三</div>
        </div>
    </div>
</div>
<script>
$(function(){
    $('#btn1').click(function(){
        $('.collapse').collapse('show');
    })
    $('#btn2').click(function(){
        $('.collapse').collapse('hide');
    })
    $('#btn3').click(function(){
        $('.collapse').collapse('toggle');
    })
})
</script>

【事件】

该插件支持4种类型的事件订阅 

show.bs.collapse        show方法调用之后立即触发该事件
shown.bs.collapse   　　 此事件在collapse已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.collapse        hide方法调用之后立即触发该事件。
hidden.bs.collapse    　此事件在collapse被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题一" href="#panel1">标题一</a></h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">折叠区内容一</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题二" href="#panel2">标题二</a></h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容二</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题三" href="#panel3">标题三</a></h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容三</div>
        </div>
    </div>
</div>
<script>
$(function(){
    $("#accordion").on("show.bs.collapse",function(e){
        var $element = $(e.target).siblings().first().find('a');
        $element.html($element.data('html') + '[折叠区已打开]');
    }).on("hide.bs.collapse",function(e){
        var $element = $(e.target).siblings().first().find('a');
        $element.html($element.data('html') + '[折叠区已关闭]');
    })

});    
</script>


感谢各位的阅读，以上就是“Bootstrap如何实现手风琴效果，详细步骤是什么”的内容了，通过以上内容的阐述，相信大家对Bootstrap如何实现手风琴效果，详细步骤是什么已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： bootstrap手风琴
上一篇： Bootstrap中怎么设置自适应屏幕，步骤是什么
下一篇： Bootstrap按钮组件怎么应用，有哪些样式
相关信息推荐
Java中怎样实现对图像压缩处理，方法是什么
2022-09-15 17:48:11　
摘要：本篇文章给大家带来了关于java的相关知识，主要为大家介绍了java实现1M图片压缩优化到100kb示例详解，图像压缩是数据压缩技术在数字图像上的应用，有需要的朋友可以借鉴参考下，希望能够有所帮助。
在PHP中用什么函数可以求二维数组的长度
2022-07-25 09:27:18　
摘要：在php中，可以使用count()函数来求二维数组的长度，该函数可以统计出数组里所有元素的数量，也就是数组的长度；当该函数的第二个参数设置为“COUNT_RECURSIVE”或者1就可递归的计算数组中元素的个数，也就是求出二维数组的长度，语法为“count(二维数组,COUNT_NORMAL)”或“count(二维数组,1)”。
PHP facade模式的作用是什么，如何使用
2022-05-12 11:17:45　
摘要：门面模式的最初目的并不是为了避免让你阅读复杂的 API 文档，这只是一个附带作用。其实它的本意是为了降低耦合性并且遵循 Demeter 定律。
云活动
推荐内容
  • PHP中替换第一位字符的方法和代码是什么
    2022-12-14 11:21:38
  • Python使用中有哪些高效、实用的高级技巧
    2022-08-19 17:53:01
  • 新手学习Python有哪些关键字要掌握
    2022-08-19 17:51:59
    • 热门关键词
    Bootstrap手风琴组件 bootstrap手风琴 监控云服务器 Python输入 bootstrap按钮组件 swoole PHP 内置服务器 数据库数据 go实现JSON解析器 字符型数据存储形式 基本组成 云计算 检测索引 Java抽象工厂模式 InnoDB架构 web与php SpringCloud Eurek 文心一言 c语言强制类型转换 JS const Python反序列化 调研结果 php剔除字符串后 php数组排列 js字母转大写 golang循环 服务器租用多少钱 java 静态方法 Web安全 闭包共享变量
    热门信息
  • Python怎么样创建txt文件，写入方法是什么？
    2022-01-24 19:23:44
  • Python中如何求阶乘？教你四个方法
    2022-02-25 17:19:26
  • pycharm怎么完全卸载？两个步骤帮你搞定
    2022-01-04 18:53:44
  • Java中map判断是否存在key怎样做？教你两个方法
    2022-01-26 18:39:38
  • Python中怎样利用while求1到100的和？
    2021-11-20 17:46:01
  • Java中string转date有哪些方式，怎样实现？
    2022-01-18 18:00:09
  • Python中怎么定义数组？教你三种方法
    2022-01-13 18:58:11
  • Python中的eval函数的作用是什么，怎样用？
    2022-01-24 19:23:57
  • 用python如何读取csv文件，你知道几种方法？
    2021-11-22 17:53:55
  • python中怎样统计元素出现的次数，方法有哪些？
    2021-11-20 17:45:40
    • 群英网络助力开启安全的云计算之旅
    立即注册，领取新人大礼包
    专业资深工程师驻守
    7X24小时极速响应
    一站式无忧技术支持
    免费备案服务
    • 联系我们
    • 24小时售后：4006784567
    • 24小时TEL ：0668-2555666
    • 售前咨询TEL：400-678-4567

    • 官方微信
      官方微信
    Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
    增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
    免费拨打 400-678-4567
    免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
    微信公众号
    返回顶部
    返回顶部 返回顶部