Question

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

我被告知，用户单击面板标题以查看每个可折叠面板中包含的信息是不明显的，所以现在我需要添加一个标签，显示＆＃34;显示详细信息＆＃34 ;折叠时，＆＃34;隐藏细节＆＃34;打开时。

问题：我正在使用的jquery脚本切换＆＃34;隐藏详细信息＆＃34;所有面板上的标签，无论点击哪一个。

此外，如果用户点击另一个面板，则前一个面板会关闭，但不会切换显示＆＃34;显示详细信息＆＃34;试。

最后，我希望整个面板标题能够在点击时切换显示和隐藏详细信息标签。

这里有一些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

Bootstrap可折叠面板切换显示细节/隐藏细节标签

1 个答案: