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。例如，我无法在“突出显示”中添加ID。代码块周围的div或更多div。
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，所以你应该只能添加一个按钮，然后添加一个click事件来折叠代码块。

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

});