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();。

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