javascript - HTML5 不加载隐藏的 div？

Question

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

应该是:

这是我的代码:

CodePen

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，你会明白我的意思。

Answer 1

如果您将 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');
});