Question

我遇到了问题，这里已经有过描述，但我找不到解决方法。问题是我正在使用这个手风琴的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我正在加载Google地图：

<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片段来使这个东西工作，或者我是否必须触摸谷歌地图加载脚本（通过CMS插件动态加载）？

Answer 1

这也在jQuery UI Tabs faq中描述。尝试听取手风琴变化事件并使用

触发地图刷新

 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，可折叠的：是的， activate：function（e，ui）{ ui.newPanel.find（'iframe'）。each（function（）{ $（this）.get（0）.src = $（this）.attr（'src'）; }）; } }）;

这对我有用。谢谢Mitch McCoy

谷歌地图和jQuery手风琴的问题

3 个答案: