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

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

    <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>