如何在加载时强制插件初始化其div

Question

我用这个插件来制作甘特图，http://taitems.github.io/jQuery.Gantt。

我希望能够在页面加载时隐藏div类“甘特”，并通过切换使div可见。

我发现当加载甘特div隐藏的页面时，图表不会完全呈现。div仍然如图所示。

<div class="gantt"></div>

但是，在加载页面时，会生成图表html。

如果页面加载时div是隐藏的，我如何强制插件生成html？

Answer 1

如前所述，您可能希望使用visibility而不是display。

.selector.hidden {
    display: block;
    visibility: hidden;
}

有两个基本的退路：

1. 初始化甘特图后，尝试隐藏div。
2. 在切换甘特图时初始化它

同步后隐藏

$(".selector").each(function(){
    var hidden = $(this).is(':hidden');
    $(this).show().gantt({
        source: ...
    });
    if (hidden) $(this).hide();
});

在切换上隐藏

function toggleChart(chart) {
    var $chart = $(chart).slideToggle();
    if (!$chart.data('initialized')) {
        $chart.data('initialized', true);
        $chart.gnatt({ /* your options here */ });
    }
}