引导选项卡折叠不适用于小屏幕上的ajax调用
引导选项卡折叠不适用于小屏幕上的ajax调用
提问于 2015-10-05 22:54:10
我从这个链接使用Bootstrap标签折叠插件：https://github.com/flatlogic/bootstrap-tabcollapse。
这个插件在小屏幕(手机)上切换bootstrap tabs组件为折叠(折叠)，它在大屏幕上工作得很好，例如桌面。我在其中一个选项卡上有一个ajax调用。当标签显示在大屏幕(例如桌面)上时，这个ajax调用工作得非常好，但是当标签切换到小屏幕上的accordion时，ajax query不会被触发。以下是我的代码：
<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>回答 1
Stack Overflow用户
发布于 2016-03-31 20:54:21
在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32951602
复制相关文章
相似问题
腾讯云开发者
