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属性替代

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

JS触发

【关键字】

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

显示折叠区域
隐藏折叠区域
反转折叠区域


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

【事件】

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

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

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

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