jquery - Google map 和 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;
}

Google 表示这是一个问题，因为 CSS 规则 display: none;因此 map 被部分渲染(带有灰色 block )并且不居中。

是否可以只调整上面的 jQuery 代码片段来让这个东西工作，或者我是否必须触摸 Google map 加载脚本(通过 CMS 插件动态加载)？

Answer 1

这在 jQuery UI Tabs faq 中有描述。以及。尝试监听 Accordion 更改事件并使用

触发 map 刷新

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