嵌套 Bootstrap 折叠（手风琴）

Question

我正在实施 Bootstrap 3.3.7 Collapse（手风琴）。我确实复制了示例 here.

我修改了 panel-title 部分，添加了插入符并将文本移出定位点，这样只有插入符可单击以响应折叠事件：

<h4 class="panel-title">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#sub-role-1_sub-role-1-accordion" href="#collapse-sub-role-1_sub-role-1" aria-expanded="true" aria-controls="collapse-sub-role-1_sub-role-1">
        <span class="caret caret-mr"></span>
    </a>Sub Role 1
</h4>

我还添加了自定义 JS 和 CSS 以使插入符号在单击折叠时上升（下拉）：

var collapseList = $('.panel .panel-collapse');
collapseList.each(function() {
    var collapseId = $(this).attr('id');
    $('#' + collapseId).on('show.bs.collapse', function() {
        $(this).prev('.panel-heading').find('.panel-title > a').addClass('dropup');
    }).on('hide.bs.collapse', function() {
        $(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
    });
});

.panel .panel-heading>.panel-title>a>span.caret {
    border-top: 6px solid black;
}

.panel .panel-heading>.panel-title>a.dropup>span.caret {
    border-bottom: 6px solid black;
    border-top: none;
}

我已经更改了所有 ID 和所有其他 ID data-attributes 以避免冲突。

除了嵌套的手风琴（手风琴内的手风琴body），这非常有效。目前，我有三层嵌套手风琴。问题是嵌套的手风琴也会影响 parent 直到根手风琴 - 它们的插入符号也会下拉或下拉。第二个手风琴（嵌套）影响第一个，第三个影响第二个和第一个。

完整代码：GitHub Gist

感谢您的帮助。

Answer 1

collapseList.each(function() {
var collapseId = $(this).attr('id');
$('#' + collapseId).on('show.bs.collapse', function() {
    $(this).closest('.panel').find('.panel-heading').find('.panel-title > a').addClass('dropup');
}).on('hide.bs.collapse', function() {
    $(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
});
 });

您可以试试这个，如果没有解决请分享您编写的面板的 html 代码。

Answer 2

span[aria-expanded="true"] i::before {
        content: "\f106";
    }

    .uner {
        margin: 0 50px 15px;
    }
    #collapse1 {
        border:1px solid #dedede;
        border-top:0px;
    }

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>

    <div class="container">
        <h2>Accordion Example</h2>
        <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a>Collapsible Group 1</a>
                        <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-angle-down"></i></span>
                    </h4>
                </div>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a>Sub Collapsible Group 1.1</a>
                                    <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-angle-down"></i></span>
                                </h4>
                            </div>
                            
                        </div>
                        <div id="collapse2" class="panel-collapse collapse">
                                <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
                            </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a>Sub Collapsible Group 1.2</a>
                                    <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse3"><i class="fa fa-angle-down"></i></span>
                                </h4>
                            </div>
                            
                        </div>
                        <div id="collapse3" class="panel-collapse collapse">
                                <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
                            </div>
                    </div>


                </div>
                

        </div>
    </div>

</body>

</html>

Answer 3

2021 年更新

原来的答案已经过时了。使用最新的 Bootstrap 5，只需在同级 Collapse 元素上使用 data-bs-parent= 属性即可实现 accordion behavior...

嵌套手风琴可以放置在另一个 Collapse 元素内，然后成为嵌套子元素的 data-bs-parent=。

<div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0 d-inline">
                    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapse #1 </button>
                </h5>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
                <div class="card-body" id="child1">
                    <div class="card">
                        <div class="card-header">
                            <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseOneA">Child A</a>
                        </div>
                        <div class="card-body collapse" data-bs-parent="#child1" id="collapseOneA"> ... </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseOneB">Child B</a>
                        </div>
                        <div class="card-body collapse" data-bs-parent="#child1" id="collapseOneB"> ... </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapse #2 </button>
                </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
                <div class="card-body"> ... </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapse #3 </button>
                </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
                <div class="card-body"> ... </div>
            </div>
        </div>
    </div>

Bootstrap 5 Nested Accordion

嵌套 Bootstrap 折叠（手风琴）

Nested Bootstrap Collapse (Accordion)

css

jquery

accordion

collapse

twitter-bootstrap-3