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

Posted 2023-03-24

【中文标题】没有 id 或数据的 Bootstrap 3 可折叠面板

【英文标题】：Bootstrap 3 collapsible panel without id or data

【发布时间】：2014-10-20 22:02:10

【问题描述】：

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

这是我想编写的目标 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>

【参考方案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>