javascript - jQuery - Div 不适合页面内容

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 和 ma​​x-width: auto。在我看来，事实上，只要我调整页面大小时，jQuery 就会出现故障，图形会立即“快速”回到他占据页面宽度 100% 的位置。当我只是打开 FireBug 时也会发生同样的情况。一旦 FireBug 打开图形“捕捉”并填充 div。

遗憾的是，我无法提供代码，因为它是一个框架内的 Smarty + Jquery + PHP + MySQL 元素，我无法隔离问题。我应该怎么做才能“刷新”或“刷新”最小宽度/最大宽度？

谢谢你的时间

Answer 1

您可以尝试的一件事是仅在选项卡打开后才呈现图表，例如:

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

  });

一个 hacky 解决方案是在动画完成处理程序中调用浏览器调整大小事件，其工作方式与您手动调整浏览器大小相同。

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

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