我正在尝试使用Ajax加载可折叠面板。我可以使用它,但是我的触发器在a标签上触发,因此在打开和关闭面板时会调用ajax脚本。关闭面板时,不应加载它,这是过载。
我的代码:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">First panel</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div id="depUsers511"><!-- here users will be loaded through ajax --></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Second panel</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="depUsers511"><!-- here users will be loaded through ajax --></div>
</div>
</div>
</div>
JavaScript:
$('#accordion a').click(function () {
var collapse_element = event.target;
alert(collapse_element);
var href = this.hash;
var depId = href.replace("#collapse","");
var dataString = 'depId='+ depId + '&do=getDepUsers';
$.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) {
$('#depUsers'+depId).html(data);
});
})
ajax脚本返回div的内容。
因此,它可以工作,但是我正在寻找触发ajax加载触发器的正确方法...我认为我需要使用“ show.bs.collapse”事件,但无法找到如何在此上使用它一个包含多个动态面板(具有自己的ID)的面板。
谢谢你的帮助!
M.
最佳答案
您可以尝试以下方法:
$('#accordion').on('show.bs.collapse', function(e){
var depId = $(e.target).attr('id').replace('collapse','');
...
});