Bootstrap tabcollapse 不适用于小屏幕上的 ajax 调用

Question

我正在使用来自此链接的 Bootstrap tabcollapse 插件：https://github.com/flatlogic/bootstrap-tabcollapse。

此插件将引导选项卡组件切换为小屏幕（手机）的折叠（手风琴），它适用于较大的屏幕，例如桌面。 我在其中一个选项卡上有一个 ajax 调用。当标签显示在大屏幕（例如桌面）上时，这个 ajax 调用工作得非常好，但是当标签切换到小屏幕的手风琴时，ajax 查询不会被触发。以下是我的代码：

<ul id="details-tabs" class="nav nav-tabs">
  <li id="my-charges" class="active">
    <a href="#charges" data-toggle="tab">Charges</a>
  </li>
  <li id="conditions">
    <a href="#detail-conditions" data-toggle="tab">Conditions</a>
  </li>            
</ul>

<div class="tab-content">

  <div class="tab-pane fade in active" id="charges">
     Some HTML
  </div>

  <div class="tab-pane fade" id="detail-conditions">
     Data Via ajax
  </div>

</div>

<script>

  $('#conditions').click(function() 
  {  
    $.ajax({  
      dataType:'html' ,
      type: 'GET' , 
      data: {'id':1}, 
      url: 'controller/action',
      success: function(result)
             {
                $('#detail-conditions').html(result);
             }    
    });
  });

  $('#details-tabs').tabCollapse();

</script>

Answer 1

在ajax成功函数中添加$('#details-tabs').tabCollapse();。

    <script>

      $('#conditions').click(function() 
      {  
        $.ajax({  
          dataType:'html' ,
          type: 'GET' , 
          data: {'id':1}, 
          url: 'controller/action',
          success: function(result)
                 {
                    $('#detail-conditions').html(result);
$('#details-tabs').tabCollapse();
                 }    
        });
      });



    </script>