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>

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

1 个答案: