显示隐藏div后调整大小

Question

    <a class="showmap" href="#">Show map</a>
<div id="map" style="height: 400px; width: 400px;"> </div>
<script type="text/javascript">
$(function() { 
 //initialise map
});
$(document).ready(function(){
    $('.showmap').click(function(){
    $("#map").slideToggle();
    google.maps.event.trigger(map, 'resize');
   });
});
</script>

我相信你现在已经知道了。我正在试着切换谷歌地图。问题是单击showMap按钮后的地图显示如下:

http://forum.jquery.com/viewImage.do?fileId=14737000003424984& forumGroupId = 14737000000003003

有人能指出我做错了什么吗?我希望地图显示在整个div上。如果你看看那张图片的底部，你会注意到，地图文案和品牌人员在正确的地方，但地图不是。它不会移动到div的底部。它只是跳回到图片中的位置。

Answer 1

看起来你太早调整大小了。试着这样做:

$("#map").slideToggle('slow', function() {
    google.maps.event.trigger(map, 'resize');
});

这将使调整大小函数在滑动切换完成后被调用。

如果上面不起作用，一个解决方法是将地图div包含在另一个隐藏溢出的div中，然后滑动切换父div而不是地图div