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>

这是我的小提琴

我想我可能会走错路了； 也许应该使用切换类？

Answer 1

我想通了。 关于这个问题，以前有很多答案。 很抱歉发布。

我需要用

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

这是我最新的小提琴