javascript - Bootstrap Collapse - いくつかのクラスによる各 div?

Question

.ID のないクラスで折りたたむための複数の div があります。

<div class="spoiler">
    <div class="spoiler-btn">spoiler1</div>
    <div class="spoiler-body collapse">spoiler 1</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler2</div>
    <div class="spoiler-body collapse">spoiler 2</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler3</div>
    <div class="spoiler-body collapse">spoiler 3</div>
</div>

すべての div を折りたたむ .spoiler-btn プラグインの data-attribute data-toggle="collapse" data-target=".spoiler-body" を使用します。ただし、親 .spoiler 内でのみ折りたたむ必要があります

更新しました

私は私にとって正しい方法を見つけました：

$.fn.ready(function() {
    // Spoiler
    $(document).on('click', '.spoiler-btn', function (e) {
        e.preventDefault()
        $(this).parent().children('.spoiler-body').collapse('toggle')
    });
});

Bootsprap collapse.js は、クラス「collapse」で動作します。このクラスを追加する必要があります。 $(document).on('click', '.spoiler-btn', function (){...})- 速い方法はクリックを聞きます。この場合、クロージャを保持するためにクロージャを作成する必要があるため、余分なコードを追加する価値はありません。クリック イベントはまれにしか発生しません (ユーザーがアコーディオンを操作しないことを選択した場合は、まったく発生しません)。

デモ: http://jsfiddle.net/vralle/qX4Pt/

ありがとう