嵌套引導折疊（手風琴）

Question

我正在實施 Bootstrap 3.3.7 Collapse（手風琴）。 我確實復制了這里的例子。

我通過添加插入符並將文本移出錨點來修改面板標題部分，以便只有插入符可單擊以響應折疊事件：

<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 以在單擊折疊時使插入符 go 向上（下拉）：

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 和所有其他數據屬性以避免沖突。

除了嵌套手風琴（手風琴體內的手風琴）之外，這非常有效。 目前，我有三層嵌套手風琴。 問題是嵌套的手風琴也會影響到根手風琴的父級 - 他們的插入符號也是 go 下拉菜單或下拉菜單。 第二個手風琴（嵌套）影響第一個，第三個影響第二個和第一個。

完整代碼： GitHub 要點

感謝幫助。

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

2021 年更新

原始答案已過時。 使用最新的Bootstrap 5 ， 手風琴行為可以通過簡單地在同級 Collapse 元素上使用data-bs-parent=屬性來實現...

嵌套手風琴可以放置在另一個 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 嵌套手風琴

Answer 3

 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>