ブートストラップダイナミックなAjaxコンテンツのアコーディオン

Question

ajaxからのコンテンツでアコーディオンを作成したいと思います。

<div class="latestinfo panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
// DYNAMIC CONTENT HERE 
</div> 

と私の成功のアヤックスは、次のとおりです：

だから、私のHTMLは、コンテンツが表示され

• 現在

  success: function(data) { 
        data.items.forEach(function(e) { 
         $('.latestinfo').append('<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">' + e.title + '</a></h4></div><div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body">' + e.content + '</div></div></div>'); 
        }); 
       } 
  

  、

• 私が最初にクリックしたとき1つ開きます
• 他をクリックすると、最初のトグル（開閉）

上記のようにアコーディオンが正しく動作しないという問題があります。

Answer 1

idは（大声でそれを言うと、エコー想像）一意でなければなりません...

あなたはユニークなidを作成するために、.forEach()が提供するindexを使用することができます。
;）

そして、あなたは複数行の文字列を連結する+を使用することができます...
は、読みやすさを向上させます。

// Assuming this JSON. 
 
var data = {items:[{title:"ONE",content:"Something-1"}, 
 
        {title:"TWO",content:"Something-2"}, 
 
        {title:"THREE",content:"Something-3"} 
 
        ] 
 
      }; 
 

 

 
var success = function(data) { 
 
    data.items.forEach(function(item,index) { 
 
    $('.latestinfo').append(
 
     '<div class="panel panel-default">'+ 
 
      '<div class="panel-heading" role="tab" id="heading_'+index+'">'+ 
 
      '<h4 class="panel-title">'+ 
 
       '<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_'+index+'" aria-expanded="true" aria-controls="collapse_'+index+'">'+ 
 
        item.title+ 
 
       '</a>'+ 
 
      '</h4>'+ 
 
      '</div>'+ 
 
      '<div id="collapse_'+index+'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading_'+index+'">'+ 
 
      '<div class="panel-body">'+ 
 
       item.content+ 
 
      '</div>'+ 
 
      '</div>'+ 
 
     '</div>' 
 
    ); 
 
    }); 
 
} 
 

 
// Feaking an ajax response... 
 
success(data);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 

 
<div class="latestinfo panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
// DYNAMIC CONTENT HERE 
 
</div>