javascript - twitter-bootstrap js 切换公共类的所有元素的所有折叠

Question

我有一堆元素（代码块）我希望能够使用 twitter-bootstrap 的 javascript 来折叠，例如

some text

<div class="highlight">
code code
</div>

some more text text 

<div class="highlight">
code code
</div>

我可以添加以下 javascript 来使所有这些元素崩溃：

$('highlight').collapse({
  toggle: true
})

现在我想添加一个按钮来切换这些元素的折叠/显示。有任何想法吗？

解决方案要求

我正在寻找一个解决方案

1. 扩展但不必使用代码块更改原始 html。例如，我不能在代码块周围的“突出显示”div 或更多 div 中添加 id。
2. 在类似的目标中，我希望它适用于所有突出显示类 div。

请注意，使用 twitter bootstrap 中的正常折叠类，例如：

<a href="#block1" data-toggle="collapse">toggle</a>
<div class="collapse" id="#block1">
code code
</div>

不会以这种方式概括，因为它需要 id，如果它们重复，它只会切换第一个

Answer 1

twitter bootstrap 在后台使用 jQuery，因此您应该能够添加一个按钮，然后添加一个单击事件来折叠代码块。

<input type="button" value="show/hide" id="toggle_code" />
$(function(){
    $('#toggle_code').click(function(){
        $('.highlight').collapse({
          toggle: true
        })
    });

});