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

chart-containerにwrapperを追加して、その高さを切り替えると機能します。

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

Answer 2

JavaScriptの "getElementById（）"関数を使用する代わりに、cssの "display：none"プロパティを使用することができます。例については

：

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

うまくいけば、この意志は正常に動作します。 ありがとうございました:)