javascript - 带有 HighCharts 和 Leaflet 的容器 .fadeIn/Out

Question

所以我有 2 个 wrapper ，一个有高位图，另一个有传单 map 。我使用按钮来切换 div 的进出。图表 div 工作正常，但我必须单击两次按钮才能呈现 map 。我试图放置一个 setTimer() 来查看是否有助于转换，但没有任何帮助。我有一个 fiddle ，它说明了我正在尝试做什么，但 map 有问题 here .我的问题是为什么它不会立即呈现？我该怎么做才能让它立即呈现？谢谢

Answer 1

您正在 container 中呈现 chart 并且 container 同时具有 map 和 chart 因此在呈现 chart 之后，您的 map div 从 container 中移除，因此会产生问题。

注意:您已经将 container id 赋给 div 两次

替换你的 HTML

<div id="maincontainer">
    <div id="chart-wrapper" style="display:block; overflow: auto;">
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
    </div>
  <div id="map-wrapper" style="overflow: auto; display: none;">
        <div id="map-container" style="height: 400px; "></div>
    </div>
</div>


<button id="toggle-btn">Map</button>
<button id="run-btn">run</button>

fiddle http://jsfiddle.net/QBYPH/2/