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;
}

Googleによると、これは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 に答える