帶動態阿賈克斯內容的Bootstrap Accordion

我想用ajax創建一個帶有內容的手風琴。帶動態阿賈克斯內容的Bootstrap Accordion

所以，我的HTML是：

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

和我的成功AJAX是：

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>'); 
      }); 
     }

目前，

顯示內容
當我點擊第一它打開一個
當我點擊其他時，第一個開關（打開/關閉）

問題是手風琴不能正常工作，如上所述。

來源

2017-07-28 taek

剛剛從'.panel-collapse'刪除類'.in'，這使得手風琴開放。另外，從我看到的情況來看，所有手風琴都有重複編號的問題。他們都有相同的＃headingOne'編號。這就是爲什麼它不起作用。 – kwiat1990

@ kwiat1990謝謝！ – taek

的id必須是唯一的（大聲說和想象回聲）...

您可以使用.forEach()提供，創造出獨特的idindex。
;）

你也可以使用+來連接多條線路上串...
提高了可讀性。

// 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>

來源

2017-07-28 16:03:37

非常感謝！ – taek

帶動態阿賈克斯內容的Bootstrap Accordion

回答

相關問題