我正在尝试使用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','');
   ...
});

07-24 09:38
查看更多