Bootstrap 3可折叠面板,没有ID或数据 [英] Bootstrap 3 collapsible panel without id or data
问题描述
我需要在不使用ID或数据属性的情况下处理面板折叠行为.理想情况下,通过在父div上设置一个可折叠"类来折叠其内容,然后单击标题即可触发折叠
I need to handle panel collapse behavior without using ID or data attributes. Ideally by setting a "collapsible" class on the parent div that can collapse its content, and a click on the heading should trigger the collapse
这是我要编写以自动处理折叠行为的目标HTML
Here's the target HTML I'd like to write to handle collapse behavior automatically
<div class="panel-group collapse-all-but-one">
<div class="panel panel-primary panel-collapsible>
<div class="panel-heading">Click me to collapse</div>
<div class="panel-body">I will collaaaaaaapse</div>
</div>
<div class="panel panel-warning panel-collapsible">
<div class="panel-heading">Hey another one</div>
<div class="panel-body">I will close when the other one opens</div>
</div>
</div>
推荐答案
这是我的神奇代码(现成的东西可确保与rails/angularJS兼容)
Here's my magic piece of code (the ready stuff ensures compatibility with rails/angularJS)
var ready
ready = function(){
$(".panel-collapsable")
.children(".panel-heading")
.click(function(){
var group = $(this).parent().parent()
if (group.hasClass("panel-group one-at-a-time")){
group.children(".panel").children(".panel-body")
.collapse('hide')
}
$(this)
.next('.panel-body')
.collapse('toggle')
})
}
$(document).ready(ready);
$(document).on('page:load', ready);
请记住添加一些.boot.in或.collapsed之类的引导程序类,以初始化正确的行为,否则首次单击将无济于事.
Remember to add some bootstrap classes like .collapse .in or .collapsed to initialize correct behaviour or the first click isn't going to do anything.
<div class="panel-body collapse in">I am expanded on page load</div>
...
<div class="panel-body collapse">I am collapsed on page load</div>
这篇关于Bootstrap 3可折叠面板,没有ID或数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!