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

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，因此您应该能够添加一个按钮，然后添加一个点击事件来折叠代码块。

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

});