如何強制插件初始化，如果它的div在加載時被隱藏

Question

我正在使用此插件作爲甘特圖，http://taitems.github.io/jQuery.Gantt。

我希望能夠在頁面加載時隱藏div類「gantt」，並通過切換使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 */ }); 
    } 
}