HTML5无法加载隐藏的div？

Question

我想创建一个可切换的图表，如果它开始时图表可见，一切正常。但是，如果我使用display: none然后切换，图表不会显示实际的烛台条，我无法弄清楚原因。

原定于：

这是我的代码：

CodePen

＆＃13;

＆＃13;

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);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

例如：

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

希望这样可行。 谢谢:)）

Answer 2

如果您向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;
}

JS

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