具有动态 ajax 内容的 Bootstrap Accordion [英] Bootstrap Accordion with dynamic ajax content
本文介绍了具有动态 ajax 内容的 Bootstrap Accordion的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用来自 ajax 的内容创建一个手风琴.
所以,我的 HTML 是:
//动态内容在这里
我的成功 ajax 是:
成功:函数(数据){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>');});}
目前,
- 显示内容
- 当我点击第一个时它会打开
- 当我点击其他时,第一个切换(打开/关闭)
问题是手风琴没有像我上面描述的那样正常工作.
解决方案
An id
MUST BE UNIQUE(大声说出来并想象回声)...
您可以使用 .forEach()
提供的 index
来创建唯一的 id
.
;)
并且您可以使用 +
将字符串连接到多行...
提高可读性.
//假设这个 JSON.var data = {items:[{title:"ONE",content:"Something-1"},{title:"TWO",content:"Something-2"},{title:"THREE",content:"Something-3"}]};var 成功 = 函数(数据){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>');});}//伪装一个 ajax 响应...成功(数据);
<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">//动态内容在这里
I want to create an accordion with a content from ajax.
So, my HTML is :
<div class="latestinfo panel-group" id="accordion" role="tablist" aria-multiselectable="true">
// DYNAMIC CONTENT HERE
</div>
and my success ajax is :
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>');
});
}
Currently ,
- The content is displayed
- When i click the first one it open
- When i click other, the first toggle ( open / close )
The problem is that the accordion is not working correctly as I described above.
解决方案
An id
MUST BE UNIQUE (say it loud and imagine echo)...
You can use the index
provided by .forEach()
to create unique id
.
;)
And you can use +
to concatenate a string on multiple lines...
Improves readability.
// 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>
这篇关于具有动态 ajax 内容的 Bootstrap Accordion的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文