使用 ajax 引导加载折叠面板答案

【问题标题】：bootstrap load collapse panel with ajax使用 ajax 引导加载折叠面板
【发布时间】：2014-02-15 17:25:12
【问题描述】：

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

感谢您的帮助！

【问题讨论】：

标签： ajax twitter-bootstrap collapse

【解决方案1】：

我通过在加载数据时添加一个“打开”类并在打开时单击删除相同的类来解决它：

$('#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);
          });
      }
  });

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

【讨论】：

【解决方案2】：

你可以试试这个：

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

【讨论】：

【解决方案3】：

我认为与其依赖元素 ID，并用数字污染它并进行字符串替换等，您可以使用data 属性：

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

然后在 JS 中：

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

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

【讨论】：