Bootstrap v3.3.5とv2.1.1のブートストラップコラプス関数の相違

Question

私は自分のアプリケーションでブートストラップv3.3.5を使用しています。ユーザーがリンクをクリックすると、その下のdivがトグルするようなコラプス機能を組み込みたいと考えていました。このCan you specify a "data-target" for Bootstrap which refers to a sibling DOM element without using an ID?に答えるために、私は、ブートストラップv2.1.1.min.jsとv2.1.1.min.cssを使用している以下のフィドルリンク
https://jsfiddle.net/szp1cg0k/、で、私の要件として、同様の結果を達成することができた参照

しかし、私は、ブートストラップv3.3.5.min.jsを含めるとv3.3.5.min.cssはトグル/折りたたみ機能はここで働いていない参照しない、どちらも

が

JS https://jsfiddle.net/ohoLxap6/2/を更新し、エラーをスロー同じフィドルでhtmlコード：

<fieldset class="fsStyle">  
       <legend class="legendStyle"> 
        <a data-toggle="collapse-next" data-target=".demo" href="#">Activity Log Filter Criteria4</a> 
       </legend> 
       <div class="demo" > 
         <div class="col-md-2"> 
          <label for="activity_from_date" class="labelStyle">Activity From Date:</label> 
         </div> 
         <div class="col-md-4"> 
          <input name="fromDate" maxlength="10" size="11" tabindex="59" value="" onblur="javascript:DateFormat(this,event,true);" class="textInput" id="activity_from_date" type="text"> 
         </div> 
     </div> 
</fieldset> 

スクリプト：

$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function() { 
console.log($(this).parent()); 
var $target = $(this).parent().next() 
console.log($target); 
$target.data('collapse') ? $target.collapse('toggle') : $target.collapse()  
}); 

誰も私に私が間違っているつもりですいくつかのヒントを与えることはできますか？

UPDATE：

私は、ブートストラップの崩壊機能を認識していて、私は自分のフォームで複数のdivを持っていると私はdiv要素のほとんどに崩壊機能を含めます。これを達成する1つの方法は、

<div data-toggle="collapse" data-target="#demo1"> 
    <div id="demo1"> 
    <p>demo 1 ......</p> 
    </div> 
<div data-toggle="collapse" data-target="#demo2"> 
    <div id="demo2"> 
    <p>demo 2 ......</p> 
    </div> 

ですが、代わりにidを使いたいのではなく、クラスを指定したいと思います。理由は、私はバックエンドでjqtreeを持っているので、クローン関数も含めなければならないので、IDを使うことはクローン作成後にクローンの子ノードdivのIDを処理する必要があることを意味します。したがって、代わりに次のようなクラスを使用したい

<div data-toggle="collapse" data-target=".demo"> 
    <div class="demo"> 
    <p>demo 1 ......</p> 
    </div> 
<div data-toggle="collapse" data-target=".demo"> 
    <div class="demo"> 
    <p>demo 2 ......</p> 
    </div> 

Answer 1

既存のブートストラップ機能用に独自のコードを書くのはなぜですか？

<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button> 

<div id="demo" class="collapse"> 
    Some text.. 
</div> 

ドキュメント：http://getbootstrap.com/javascript/#collapse

UPDATE：次のコードは、最新のブートストラップバージョン崩壊方法の一例である、あなたの新しい質問によると

、クラスを使用して崩壊、私は、カスタムスクリプトを作成しました：

$('[data-toggle="collapse"]').click(function() { 
    var $target = $(this).data('target'); 
    var $target = $($target); 
    $target.data('bs.collapse') ? $target.collapse('toggle') : 
    $target.collapse() 
}); 

属性data-targetのすべてのクラスがトグルされます。 https://jsfiddle.net/ohoLxap6/4/

Answer 2

これは機能しています。私はそれに応じてフィディッドを更新しました。 https://jsfiddle.net/ohoLxap6/3/

$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', 
function() { 

//console.log($(this).parent()); 
var $target = $(this).parent().next() 
console.log($target); 
$target.data('bs.collapse') ? $target.collapse('toggle') : 
$target.collapse()  
});