3

我遇到了一个问题，这里已经描述过了，但我没有找到解决它的方法。问题是我将这个 jQuery 片段用于手风琴：

$(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 加载谷歌地图：

<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 代码片段以使此功能正常工作，或者我是否必须触摸 Google 地图加载脚本（通过 CMS 插件动态加载）？

4

3 回答 3

3

这在jQuery UI Tabs faq中也有描述。尝试收听手风琴更改事件并触发地图刷新

 google.maps.event.trigger(map, 'resize')
于 2012-05-14T14:46:06.100 回答
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');
        });
    }
});
于 2013-03-12T19:21:11.657 回答
0

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

这对我有用。谢谢米奇·麦考伊

于 2013-04-03T07:12:06.273 回答