HTML5不加载隐藏的div？

我想制作一个可以切换的图表，如果图表开始显示，一切正常。但是，如果我使用display: none然后切换，图表不显示实际的烛台条，我无法弄清楚原因。HTML5不加载隐藏的div？

应该是：

Supposed to be

这里是我的代码：

var chart = new cryptowatch.Embed('bitfinex', 'btcusd', { 
 
    timePeriod: '1d', 
 
    width: 650, 
 
    customColorScheme: { 
 
    bg: "000000", 
 
    text: "b2b2b2", 
 
    textStrong: "e5e5e5", 
 
    textWeak: "7f7f7f", 
 
    short: "FD4600", 
 
    shortFill: "FF672C", 
 
    long: "6290FF", 
 
    longFill: "002782", 
 
    cta: "363D52", 
 
    ctaHighlight: "414A67", 
 
    alert: "FFD506", 
 
    } 
 
}); 
 
chart.mount('#chart-container'); 
 

 
$('#btn').click(function() { 
 
    $('#chart-container').toggle(200); 
 
});

html { 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
} 
 

 
#chart-container { 
 
    width: 100%; 
 
    height: 400px; 
 
    display: none; 
 
} 
 

 
#btn { 
 
    font-size: 2em; 
 
    width: 200px; 
 
    border: black 2px solid; 
 
    padding: 2px 0; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="chart-container"></div> 
 
<div id="btn">click</div> 
 
<script type="text/javascript" src="https://static.cryptowat.ch/assets/scripts/embed.bundle.js"></script>

请注释掉display: none，你会明白我的意思。

来源

2017-03-19 Icoined

请点击这里使用'<>'代码编辑器，而不是 – mplungjan

@mplungjan可以哟你看比烛台还是空的黑框？ – Icoined

啊，我看到空框 – mplungjan

如果您将wrapper添加到chart-container，然后切换它的高度，它将起作用。

Updated codepen

HTML

<div id="container"> 
    <div id="chart-container"></div> 
</div>

CSS

#container { 
    width: 100%; 
    height: 0; 
    overflow: hidden; 
} 
#container.show { 
    height: 400px; 
}

$('#btn').click(function(){ 
    $('#container').toggleClass('show'); 
});

来源

2017-03-19 11:24:20 LGSon

它的工作原理！谢谢老板。你知道是什么造成的吗？ – Icoined

@Icoined使用'display：none'可以给出一些图纸不会绘制的问题，因为元素就是这样，而不是显示。 – LGSon

您可以简单地使用javascript的“getElementById（）”函数，而不是使用css的“display：none”属性。

例如：

<div id="myDiv"></div> 
document.getElementById("myDiv").innerHTML = "Div changed!";

希望这将能正常工作。谢谢:)

来源

2017-03-19 11:08:09

我很努力地看到这个答案和问题之间的联系。你看过OP演示中发生了什么？ DIV的内容由制图库设置。 – nnnnnn

是兄弟。首先正确地阅读你的问题。请以正确的方式提问bro。这样你才能得到正确答案。 –

HTML5不加载隐藏的div？

回答

相关问题