Jquery 嵌套引导折叠（手风琴）

我正在实现bootstrap3.3.7崩溃（accordion）。我确实复制了这个例子

我修改了面板标题部分，添加了插入符号并将文本移出锚点，这样只有插入符号才能单击，从而响应折叠事件：

<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>

我已经更改了所有ID和所有其他数据属性以避免冲突

除了嵌套的手风琴（手风琴体中的手风琴）之外，这一点非常有效。目前，我有三个层次的嵌套手风琴。问题是嵌套的手风琴也会影响到根手风琴的父级-它们的插入符号也会向上或向下移动。第二个手风琴（嵌套）影响第一个，第三个影响第二个和第一个

完整代码：

谢谢你的帮助

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代码。

span[aria expanded=“true”]i:：before{
内容：“\f106”；
}
乌纳先生{
利润率：0.50px 15 px；
}
#崩溃1{
边框：1px实心#dedede；
边框顶部：0px；
}

手风琴示例
注意：数据父项属性确保在显示一个可折叠项时关闭指定父项下的所有可折叠元素

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

亚塌陷组1.2
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

为什么需要自定义JavaScript？Bootstrap标记了活动的可折叠。为了回答您的问题，我认为这是因为这两个事件是冒泡的，所以在执行逻辑之前需要

function（e）{e.stopPropagation（）；}

。我编写JS不是为了可折叠，而是为了修改插入符号的位置，从下到上，反之亦然。这就是我所说的“标记”：）你可以用任何你想要的方式来设置它的样式，而无需自定义类，因为Bootstrap会为你标记它。检查Manish的答案。dropup和caret都是引导类。谢谢。我尝试了你的代码没有可用的。请看一下我的HTML代码：嘿，我认为这里不需要检查任何条件。只要看看这个，让我知道它是否解决了你的问题。

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');
});
 });