javascript - Bootstrap 可折叠面板切换显示详细信息/隐藏详细信息标签

Question

我正在使用 Bootstrap，并且我有一个页面，上面有几个可折叠面板；默认情况下，第一个面板是打开的。

有人告诉我，用户单击面板标题来查看每个可折叠面板中包含的信息并不明显，所以现在我需要添加一个标签，在折叠时显示“显示详细信息”和“隐藏详细信息” “打开时。

问题:我使用的 jquery 脚本会切换所有面板上“隐藏详细信息”标签的显示，无论单击哪一个面板。

此外，如果用户单击另一个面板，前一个面板将关闭，但不会再次切换“显示详细信息”的显示。

最后，我希望整个面板标题成为单击时打开和关闭显示和隐藏详细信息标签的潜水。

这是一些 html:

<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<div class="panel-heading"><h4 class="panel-title">Overview 
<span class="more-detail" style="float:right; font-size:10px; display:none;">Show Detail     
<span class="glyphicon glyphicon-chevron-down"></span></span>
<span class="more-detail" style="float:right; font-size:10px;">Hide Detail 
<span class="glyphicon glyphicon-chevron-up"></span></span>
</h4>
</div>
</a>

<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body" id="overview-div">
Overview text here
</div>
</div>

Here's my fiddle

我想我可能以错误的方式处理这个问题；也许应该使用切换类？

Answer 1

我明白了；关于这个问题，之前有很多答案。抱歉发帖。

我需要使用

$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})

Here's my updated fiddle