1

次のような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 ブートストラップの通常の折りたたみクラスを使用することに注意してください。

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

ID が必要なため、この方法で一般化することはありません。 ID が繰り返される場合は、最初の ID のみを切り替えます。

4

1 に答える 1

1

twitter ブートストラップは舞台裏で jQuery を使用するため、ボタンを追加してから、クリック イベントを追加してコード ブロックを折りたたむことができます。

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

});
于 2012-06-06T00:40:17.173 に答える