【发布时间】：2018-10-27 14:09:24
【问题描述】：
我正在实施 Bootstrap 3.3.7 Collapse（手风琴）。我确实复制了示例here。
我修改了面板标题部分，添加了插入符号并将文本移出锚点，以便只有插入符号可以点击以响应折叠事件：
<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 和所有其他数据属性以避免冲突。
除了嵌套手风琴（手风琴主体内的手风琴）之外，这非常有效。目前，我有三层嵌套手风琴。问题是嵌套的手风琴也会影响到根手风琴的父级 - 他们的插入符号也会出现下拉或下拉。第二个手风琴（嵌套）影响第一个，第三个影响第二个和第一个。
完整代码：GitHub Gist
感谢您的帮助。
【问题讨论】：
-
为什么需要自定义 JavaScript？ Bootstrap 标记了活动的可折叠对象。
-
要回答你的问题，我认为这是因为这两个事件冒泡，所以你需要
function(e) { e.stopPropagation(); }在做你的逻辑之前。 -
我写 JS 不是为了可折叠的目的，而是为了修改插入符号的位置，从下到上，反之亦然。
-
这就是我所说的 'mark' 的意思 :) 你可以用你想要的任何方式来设置它，而无需自定义类，因为 Bootstrap 无论如何都会为你标记它。检查 Manish 的答案。
-
dropup 和 caret 都是 Bootstrap 类。
标签： jquery css twitter-bootstrap-3 accordion collapse