HTML5 不加载隐藏的 div？
创造的
我想制作一个可切换的图表，如果开始时图表可见，一切正常。但是，如果我使用display: none然后切换，图表不会显示实际的烛台条，我不知道为什么。
应该是：
这是我的代码：
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，你会明白我的意思。
一个儿子
如果你添加 awrapper到chart-container然后切换即它的高度它会工作。
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');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将隐藏的div静音（视频）html5
- 2
在DIV上停止/播放显示/隐藏HTML5视频
- 3
检测HTML5视频是播放还是暂停，并相应显示或隐藏Div
- 4
隐藏/不加载基于配置文件的HTML部件的最佳方法？
- 5
HTML5视频加载
- 6
HTML5全屏API和DIV
- 7
HTML5语义元素与 div标签
- 8
HTML5中div元素的重叠
- 9
html5标记或div用于性能
- 10
HTML5全屏API和DIV
- 11
HTML5 div包装克隆
- 12
HTML5“固定”浮动DIV？
- 13
管理HTML5 DIV大小
- 14
在加载时隐藏div
- 15
在加载时隐藏div
- 16
JSoup不加载整个HTML
- 17
laravel 5自动加载不加载模型
- 18
laravel 5自动加载不加载模型
- 19
（HTML5）无法加载我的图片
- 20
HTML5视频背景无法加载
- 21
延迟加载HTML5图片标签
- 22
Webview android无法加载HTML5
- 23
减少HTML5视频的加载时间
- 24
加载HTML5视频后播放
- 25
HTML5 视频未加载
- 26
有没有办法用css3和html5的新实现隐藏div的一部分？
- 27
禁用div子级删除（Html5拖放）
- 28
用什么代替HTML5中的div元素
- 29
HTML5 /铯-使div浮在铯地图上
我来说两句