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

【问题标题】：How to force a plugin to initialize if its div is hidden at load如果插件的div在加载时隐藏，如何强制插件初始化
【发布时间】：2014-01-22 06:32:41
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

问题可能是由于隐藏元素不占用文档中的空间，并且无论出于何种原因，在切换display 时都没有调用layout rebuilder。相反，请使用visibility 属性，这将确保消耗相同的空间，而不管它的状态是visibility.

标签： jquery html

【解决方案1】：

正如@Ohgodwhy 提到的，您可能想要使用visibility 而不是display。

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

两个基本的后备：

尝试在您初始化甘特图之后隐藏 div
在切换时初始化甘特图

同步后隐藏

$(".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 */ });
    }
}

【讨论】：