0

ボタンをクリックすると、jQuery を使用して一部のマップ コントロールを表示/非表示にするマップ アプリケーションがあります。これで、1 つ (pan_zoom コントロール) を除いて、すべてのコントロールが正常に機能しています。マップ コントロールの html 要素は、いくつかのインライン スタイルと共に動的に追加されます。

<div class="pan_zoom" style="display: block; top: 4px">pan zoom button</div>

pan_zoom コントロールは、次のようにマップをロードすると非表示になります。

$('.pan_zoom').hide();

ボタンをクリックすると、次の行を含む関数が呼び出されます。

$('.pan_zoom').toggle();

この関数は、最初のクリックで pan_zoom コントロールを非表示にします。ただし、次のクリックではコントロールが表示されませんでした。

初期化時に pan_zoom コントロールを非表示にせずに、上記を再度テストしました。今回は、切り替えによる要素への影響はありません。

トグル機能が正常に動作しない原因として、何が考えられますか?

この要素に CSS 表示プロパティを設定していないことに注意してください。トグル関数を次のように置き換えることで、この問題を解決できます。

if($('.pan_zoom').css('display') == 'block')
{
 $('.pan_zoom').hide();
}
else
{
 $('.pan_zoom').show();
}

私がより興味を持っているのは、なぜtoggle()が正しく機能しないのかを調べることです。

クリック ハンドラーは次のとおりです。

$('button[name="expand_map"]').click(toggleMap);
function toggleMap() {
....
 $('.pan_zoom, .and_other_controls').toggle();
}
4

2 に答える 2

0

これはトリッキーです。これに遭遇した他の人が計算された要素のスタイルをよく見てくれるように、ここに書き留めておきます。私の場合、コントロール div 内の div の絶対配置により、pan_zoom コントロール要素の計算された高さと幅は 0 になります。これは、jQuerytoggle()関数が要素の表示を処理する方法に影響します。

幅と高さがゼロの要素は非表示の要素と同等であると見なされるため、非表示にしないと思います。この問題を解決する 1 つの方法は、質問で説明されているようにshow()/を使用することです。hide()を使用するためのもう 1 つのあまり明白でない方法はtoggle()、幅と高さの値を設定することです。jQuery を使用すると、次のようになります。

$('.pan_zoom').css({'height': '1px', 'width': '1px'});
于 2012-11-14T09:09:05.867 に答える
0

これを試してみてください。おそらく違いがあるでしょう：

<div class="pan_zoom" style="display:none; top: 4px">pan zoom button</div>

// Comment out this line
//$('.pan_zoom').hide();

// Proceed as normal for the click handler
$('.pan_zoom').toggle();
于 2012-11-12T14:15:59.410 に答える