首页 文章

Bootstrap 3可折叠面板，没有id或数据

提问于
浏览 次
1

我需要处理面板折叠行为而不使用ID或数据属性 . 理想情况下，通过在父div上设置可折叠其内容的“可折叠”类，并且单击 Headers 应触发折叠

这是我想编写的目标HTML，用于自动处理崩溃行为

<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>
javascript twitter-bootstrap-3 panel collapse

1 回答

  • 1

    这是我的神奇代码（准备好的东西确保与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);

    请记住添加一些引导类，如.collapse .in或.collapsed来初始化正确的行为，或者第一次单击不会执行任何操作 .

    <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>
    回复于

相关问题