jQuery - Div不适合页面内容

jQuery - Div doesn't fit page content

本文关键字：不适合 Div jQuery      更新时间：2023-09-26

我有一个关于jQuery的小问题。我使用最新版本的HighCharts jQuery库(http://www.highcharts.com/)在我的一个项目上生成图形。因为我不想在同一个页面上提供几十个图表，所以我将它们分成标签页，通过slideUp和slideDown效果打开/关闭。一切都很好，只是有一个很小的问题。

加载页面后，默认选项卡被正确选中，我通常可以看到图表。当我点击另一个选项卡时，之前的选项卡向下滑动，同时选中的选项卡向上滑动，问题来了。里面的图形总是占据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的一个小故障，事实上，只要我调整页面大小，图形就会立即"快照"回到占据页面宽度100%的位置。当我打开FireBug时也会发生同样的情况。一旦FireBug打开图形"snaps"并填充div。

遗憾的是，我不能提供一个代码，因为它是一个Smarty + Jquery + PHP + MySQL项目都在一个框架内，我无法隔离的问题。我应该做什么来"刷新"或"刷新"最小宽度/最大宽度?

感谢您的宝贵时间

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

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

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

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

很抱歉，如果这没有帮助，很难知道你的问题的确切原因没有一个清晰的运行的例子。

相关文章：