Twitter-bootstrap JS切换公共类的所有元素的所有折叠

twitter-bootstrap js to toggle all collapse for all elements of a common class

本文关键字：元素 折叠 JS Twitter-bootstrap      更新时间：2023-09-26

我有一堆元素（代码块），我希望能够使用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 引导程序中的正常折叠类，例如：

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

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

Twitter Bootstrap在幕后使用jQuery，所以你应该能够添加一个按钮，然后添加一个点击事件来折叠代码块。

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