所有其他在此发布的解决方案，如果双击，则会导致切换不同步。以下解决方案使用Bootstrap框架提供的事件，并且切换始终与可折叠元素的状态匹配：
HTML：
<div class="row-fluid summary">
<div class="span11">
<h2>MyHeading</h2>
</div>
<div class="span1">
<button id="intro-switch" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
</div>
</div>
<div class="row-fluid summary">
<div id="intro" class="collapse">
Here comes the text...
</div>
</div>
JS：
$('#intro').on('show', function() {
$('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
$('#intro-switch').html('+')
})
那应该适用于大多数情况。
然而，当我试图将一个可折叠元素及其切换开关嵌套在另一个可折叠元素中时，我遇到了一个额外的问题。使用上述代码时，当我单击嵌套的切换以隐藏嵌套的可折叠元素时，父元素的切换也会更改。这可能是 Bootstrap 中的一个错误。我找到了一个看起来有效的解决方案：我给切换开关添加了一个“collapsed”类（Bootstrap 在可折叠元素被隐藏时添加了这个类，但它们并没有从一开始就有），然后将其添加到 hide 函数的 jQuery 选择器中。
http://jsfiddle.net/fVpkm/87/
HTML：
<div class="row-fluid summary">
<div class="span11">
<h2>MyHeading</h2>
</div>
<div class="span1">
<button id="intro-switch" class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">+</button>
</div>
</div>
<div class="row-fluid summary">
<div id="intro" class="collapse">
Here comes the text...<br>
<a id="details-switch" class="collapsed" data-toggle="collapse" href="#details">Show details</a>
<div id="details" class="collapse">
More details...
</div>
</div>
</div>
JS：
$('#intro').on('show', function() {
$('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
$('#intro-switch.collapsed').html('+')
})
$('#details').on('show', function() {
$('#details-switch').html('Hide details')
})
$('#details').on('hide', function() {
$('#details-switch.collapsed').html('Show details')
})
