ajax - 使用ajax Bootstrap 加载折叠面板

Question

我正在尝试使用 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)的面板。

Answer 1

你可以试试这个:

$('#accordion').on('show.bs.collapse', function(e){
   var depId  = $(e.target).attr('id').replace('collapse','');
   ...
});