[英]Jquery tabs: autoHeight for expanding content
我正在从此SITE使用jquery滑动选项卡,效果很好。 唯一的问题是autoHeight jquery函数无法适应扩展内容。 改写:选项卡容器将调整为不活动内容的高度,但问题是,一旦容器内的内容变为活动并垂直扩展,它将不再适合且看不到<---无法对其进行调整。 这是示例JSFFIDLE
我尝试这样做以调整高度以扩展内容,但是它不起作用:
<script>
var height = 50 // Set to the height you want
$('.st_view').css('height', height+'px')
});
</script>
整体jQuery
<script>
$(document).ready(function() {
$('div#st_horizontal').slideTabs({
// Options
contentAnim: 'slideH',
autoHeight: true,
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
tabsAnimTime: 300
});
var height = 50 // Set to the height you want
$('.st_view').css('height', height+'px')
});
</script>
如果只有切换器会导致内容扩展,则可以按以下方式修改切换器代码:
$('#title').click(function() {
$(this).toggleClass('active');
$('#content').toggle();
var $tab = $(this).closest('.st_tab_view');
$tab.closest('.st_view').css('height', $tab.height());
});
有关更通用的解决方案,请获取jQuery resize插件 ,然后添加以下代码:
$('.st_tab_view').resize(function() {
var $this = $(this);
$this.closest('.st_view').css('height', $this.height());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.