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

我通过添加＆＃34; open＆＃34;来解决它。加载数据时的类，如果在打开时单击则删除同一个类：

$('#accordion a').click(function () {
      if($(this).hasClass("panelisopen")){
          $(this).removeClass("panelisopen");
      } else {
          var href = this.hash;
          var depId = href.replace("#collapse",""); 

          $(this).addClass("panelisopen");

          var dataString = 'depId='+ depId + '&dep=1&do=getDepUsers';
          $.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) {
              $('#depUsers'+depId).html(data);
          });
      }
  });

我猜不是最好的解决方案，但它确实有效。

Answer 2

你可以试试这个：

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

Answer 3

我认为不是依赖于元素ID，而是使用数字进行污染并进行字符串替换，因此，您可以使用data属性：

<div class='collapse' data-dep-id="1" />

然后在JS：

var $elementId = $(e.target).data('dep-id')

如果需要，这同样适用于Ajax URL和其他属性。

带有ajax的bootstrap load collapse面板

3 个答案: