求助,在使用ajax來生成資料,然后使用bootstrap自帶的accordion手風琴功能來生成相應的效果。但是由于是動態加載,accordion手風琴不能全部正常的折疊展開,有些可以展開有些不行。
純css+html實作手風琴效果的,沒有JS。請問如何解決這個問題呢?查了好多都沒看到相應的方法。
個人覺得是 由于ajax動態加載的問題,手風琴效果沒有自動重繪資料,然后出現有些正常有些不正常的問題。因為f12除錯時所有資料都是出來的了,就是問題處不能正常展開。
求賜教。
這是html處
<div class="list2">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!--
<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="https://bbs.csdn.net/topics/#collapseOne" aria-expanded="true" aria-controls="collapseOne">
SECTION 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>Lorem </p>
</div>
</div>
</div>
-->
</div>
</div>
這是關于ajax生成的代碼
//相關問答資料獲取與呈現
getData3();
function getData3() {
var num = 20;
var $ul = $(".list2 div");//顯示問答的串列
$.ajax({
type:"get",
url:"forum.php",
data:{type:"get3",page:page,num:num},
dataType:"json",
success:function(json){
console.log(json);
if (json.error==0) {
$ul.html("");
for (var i = 0; i < json.data.length; i++) {
var $li = $('<div class="panel panel-default"><div class="panel-heading" role="tab" id="heading'+json.data[i].faq_id+'"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="https://bbs.csdn.net/topics/#collapse'+json.data[i].faq_id+'" aria-expanded="true" aria-controls="collapse'+json.data[i].faq_id+'">'+json.data[i].question+'</a></h4></div><div id="collapse'+json.data[i].faq_id+'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading'+json.data[i].faq_id+'"><div class="panel-body"><p>'+json.data[i].answer+'</p></div></div></div>');
$ul.append($li);
$li.show();
var $a = $li.find("a");
$a.on("click",function(){
var $li = $(this).parents('li');
del($(this).attr('dataid'),$li);
})
}
}else{
// alert("沒有資料");
}
},
error:function(){
alert("請求失敗!")
}
})
$('.accordion').accordion("refresh");
}
這是展不開的調式碼

這是展開成功的除錯碼
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/91253.html
標籤:HTML(CSS)
