Bootstrap tabcollapse在小屏幕上不能用于ajax调用

Bootstrap tabcollapse not working for ajax call on small screens

本文关键字：不能 用于 ajax 调用 屏幕 tabcollapse Bootstrap      更新时间：2023-09-26

我使用Bootstrap tabcollapse插件从这个链接:https://github.com/flatlogic/bootstrap-tabcollapse.

这个插件将引导选项卡组件切换为小屏幕(手机)的折叠(手风琴)，对于大屏幕(如桌面)也能正常工作。我在其中一个选项卡上有一个ajax调用。当选项卡显示在大屏幕上(例如Desktop)时，这个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>

在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>
相关文章：