谷歌地图和jQuery accordion的问题

Question

我遇到了一个问题，这里已经描述过了，但我没有找到解决它的方法。问题是我正在使用这个jQuery代码片段来实现accordion：

$(document).ready(function() {
$('#accordion > li > div.ac-inner').click(function(){

if(false == $(this).next().is(':visible')) {
    $('#accordion ul').slideUp(300);
}
    $(this).next().slideToggle(300);
});
    //$('#accordion ul:eq(0)').show()
});

通过这个HTML，我加载了Google Map：

<ul id="accordion">
<li id="acc-1"><div class="ac-inner"><h3>Tab 1</h3></div>
    <ul>
        <li><div><!-- Map goes here --></div></li>
    </ul>
</li>
<li id="acc-2"><div class="ac-inner"><h3>Tab 2</h3></div>
    <ul>
        <li><!-- Content goes here --></li>
    </ul>
</li>
<li id="acc-3"><div class="ac-inner"><h3>Tab 3</h3></div>
    <ul>
        <li><!-- Content goes here --></li>
    </ul>
</li>
</ul>

这是我的CSS：

#accordion {
list-style: none;
padding: 0;
width: 527px;
}
#accordion li {
background: none;
padding-left: 0;
}
#accordion div.ac-inner {
display: block;
cursor: pointer;
margin-bottom: 10px;
padding: 0 7px;
border: 1px solid #ddd;
background: #F5F5F5; /* Old browsers */
background: -moz-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#F5F5F5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%);/* Opera 11.10+ */
background: -ms-linear-gradient(top,  #FAFAFA 0%,#F5F5F5 100%); /* IE10+ */
background: linear-gradient(top,  #FAFAFA 0%,#F5F5F5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAFAFA', endColorstr='#F5F5F5',GradientType=0 ); /* IE6-9 */
border-radius: 5px;
box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow: 0 1px 0 #fff inset;
-webkit-box-shadow: 0 1px 0 #fff inset;
text-shadow: 0 1px 0 #fff;
-moz-text-shadow: 0 1px 0 #fff;
-webkit-text-shadow: 0 1px 0 #fff;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul {
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}

#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
#accordion #acc-1 div.ac-inner {
background: url(../images/icons/map.png) no-repeat 0 0 #F5F5F5;
text-indent: 70px;
}
#accordion #acc-2 div.ac-inner{
background: url(../images/icons/calendar.png) no-repeat 0 0 #F5F5F5;
text-indent: 70px;
}
#accordion #acc-3 div.ac-inner {
background: url(../images/icons/camera.png) no-repeat 0 0 #F5F5F5;
text-indent: 70px;
}

谷歌表示，这是一个问题，因为CSS规则显示:无；因此地图部分呈现(带有灰色块)，而不是居中。

有没有可能只是调整上面的jQuery代码片段来让这个东西工作，或者我必须触摸谷歌地图加载脚本(它是通过内容管理系统插件动态加载的)？

Answer 1

这在jQuery UI Tabs faq中也有描述。尝试侦听accordion change事件并使用触发地图刷新

 google.maps.event.trigger(map, 'resize') 

Answer 2

如果您正在手风琴中嵌入iframe，那么在打开面板时刷新iframe的src对我来说很有效：

$(".theaccordion" ).accordion({
    autoHeight: false,
    collapsible:    true,
    activate    :   function(e,ui) {
        ui.newPanel.find('iframe').each(function() {
            $(this).get(0).src = $(this).attr('src');
        });
    }
}); 

Answer 3

$(".theaccordion“).accordion({ autoHeight: false，可折叠: true，activate : function(e，ui) { ui.newPanel.find('iframe').each(function() { $(this).get(0).src = $(this).attr('src')；})；} })；

这对我很有效。谢谢米奇McCoy