如果插件的div在加载时隐藏，如何强制插件初始化

Question

我正在将这个插件用于甘特图http://taitems.github.io/jQuery.Gantt。

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

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

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

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

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

Answer 1

正如@Ohgodwhy所提到的，您可能希望使用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 */ });
    }
}