jquery - 嵌套引导折叠( Accordion )

Question

我正在实现 Bootstrap 3.3.7 Collapse( Accordion )。我确实复制了示例 here .

我通过添加脱字符号并将文本移出 anchor 来修改面板标题部分，以便只有脱字符号可单击以响应折叠事件:

<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 和所有其他数据属性以避免冲突。

除了嵌套的 Accordion ( Accordion 体内的 Accordion )之外，这完全有效。目前，我有三层嵌套 Accordion 。问题是，嵌套的 Accordion 也会影响父级 Accordion ，直至根 Accordion - 他们的插入符也会向上或向下移动。第二个 Accordion (嵌套)影响第一个，第三个影响第二个和第一个。

完整代码: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 代码。