Question

我对jQuery的一个非常小的问题。我使用最新版本的HighCharts jQuery库（http://www.highcharts.com/）来生成我的项目的图形。由于我不想在同一页面中提供数十个图表，因此我将它们拆分为使用slideUp和slideDown效果打开/关闭的标签。一切都很好，但这只是一个非常小的问题。

只要我加载页面，就会正确选择默认选项卡，我通常可以看到图表。当我单击另一个选项卡时，前一个slideDown同时选择了一个slideUp，这就是问题所在。里面的图总是占据页面宽度的310px，这就是原因。

<div style="min-width: 310px; max-width: auto; height: auto; margin: 0 auto" id="container3" data-highcharts-chart="3"></div>

这是包含图表的div，您可以看到属性 min-width：310px 和 max-width：auto 。事实上，只要我立即调整页面的大小，我就会发现jQuery的一个小故障。＃34;快照＆＃34;回到他占据100％页面宽度的位置。当我打开FireBug时也会发生同样的情况。一旦FireBug打开图表＆＃34;快照＆＃34;并填补div。

遗憾的是我无法提供代码，因为它是一个框架内的Smarty + Jquery + PHP + MySQL项目，而且我无法隔离问题。我该怎么做才能刷新＆＃34;或＆＃34;冲洗＆＃34;最小宽度/最大宽度？

感谢您的时间

Answer 1

您可以尝试的一件事是仅在打开选项卡后才渲染图表：

 $(".tab-selector").slideDown( "slow", function() {
    // Animation complete. Render chart here

  });

一个hacky解决方案是在动画完成处理程序中调用浏览器调整大小事件，它将像您手动调整浏览器一样工作。

 $(".tab-selector").slideDown( "slow", function() {
    // Animation complete.
    $(window).trigger('resize');
 });

很抱歉，如果这根本没有帮助，如果没有明确的运行示例，很难知道问题的确切原因。

jQuery - Div不适合页面内容

1 个答案: