宜宾网站建设公司

Bootstrap中的手风琴效果怎么弄

这篇文章主要介绍了Bootstrap中的手风琴效果怎么弄，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司是一家网站设计公司，集创意、互联网应用、软件技术为一体的创意网站建设服务商，主营产品：响应式网站建设、高端网站设计、成都营销网站建设。我们专注企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。成都做网站、网站建设、外贸营销网站建设、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案，我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏析悦目的作品，网站的价值服务。

Bootstrap是什么

Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应最好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。

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

结构

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

Bootstrap中的手风琴效果怎么弄

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

触发器
折叠区

    
        
            标题一
        
                     标题一对应的内容
        
                               标题二                               标题二对应的内容                                         标题三                               标题三对应的内容              

Bootstrap中的手风琴效果怎么弄

声明式触发

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

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


    
    
    

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


    
        标题一
    
    
        折叠区内容...
    

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


    
        
            标题一
        
        
            折叠区内容...
        
    
    
        
            标题二
        
        
            折叠区内容...
        
    
    ......

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


    
        标题一
    
    
        折叠区内容...
    

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

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


    
        标题一
    
    
        折叠区内容...
    

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


    
        
            
                标题一
            
        
…

通过以上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属性替代


    
        
            标题一
        
        
            折叠区内容一
        
    
    
        
            标题二
        
        
            折叠区内容二
        
    
    
        
            标题三
        
        
            折叠区内容三
        
    

Bootstrap中的手风琴效果怎么弄

JS触发

【关键字】

$(element).collapse('show');//显示折叠区域
$(element).collapse('hide');//隐藏折叠区域
$(element).collapse('toggle');//反转折叠区域
显示折叠区域
隐藏折叠区域
反转折叠区域


    
        
            标题一
        
        
            折叠区内容一
        
    
    
        
            标题二
        
        
            折叠区内容二
        
    
    
        
            标题三
        
        
            折叠区内容三
        
    

Bootstrap中的手风琴效果怎么弄

【事件】

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

show.bs.collapse        show方法调用之后立即触发该事件
shown.bs.collapse   　　 此事件在collapse已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.collapse        hide方法调用之后立即触发该事件。
hidden.bs.collapse    　此事件在collapse被隐藏（并且同时在 CSS 过渡效果完成）之后被触发

    
        
            标题一
        
        
            折叠区内容一
        
    
    
        
            标题二
        
        
            折叠区内容二
        
    
    
        
            标题三
        
        
            折叠区内容三
        
    

Bootstrap中的手风琴效果怎么弄

感谢你能够认真阅读完这篇文章，希望小编分享的“Bootstrap中的手风琴效果怎么弄”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


分享名称：Bootstrap中的手风琴效果怎么弄
网站链接：http://ybzwz.com/article/ppehjp.html

其他资讯