5

私の問題は次のとおりです。トリガー（a）とポップアップ（div）を取得しました。div はアンカー内にネストされていません。

  • a にカーソルを合わせると、div が表示されるようにします。
  • a から div に移動すると、表示されたままになります。
  • divを離れるときは、閉じたいです。
  • a の上にカーソルを置いて div に入らずに離れると、div を閉じます。

私はそのほとんどを理解しましたが、今は要求番号に苦労しています. 2. a で mouseleave をチェックするとき、div に mouseenter があるかどうかをチェックします。もしそうなら、私はマウスリーブを中止したい。そうでない場合は、divを閉じたいです。

私は何を間違っていますか？これはこれを行う正しい方法ですか？

マークアップは次のとおりです。

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>

jQuery は次のとおりです。

$('.popup_toggle').mouseenter(function() {
        var element = $(this).next('.popup_div');
        $.data(this, 'timer', setTimeout(function() {
            element.show(100);
        }, 500));
    });

    $('.popup_toggle').mouseleave(function() {
        clearTimeout($.data(this, 'timer'));
            if($('.popup_div').mouseenter==true)
            {
                return false;
            }
            else
            {
                $('.popup_div').hide(100)
            };
    });
4

3 に答える 3

2

あなたがやろうとしていることはかなり単純です。トリガーに入るときは、パネル (レイヤー、ポップアップなど) を識別し、.data() を使用して相互に参照を保存し、関連するターゲットがトリガー (パネル ビューから) またはパネル (トリガービューから）。私は一緒に何かを投げました。コンソールログを見て、これがどのように機能するかを確認してください… http://jsfiddle.net/rodneyrehm/X5uRD/

于 2011-10-11T12:05:50.887 に答える
1

あなたの実装の問題は、 のmouseenterが の の直後divに起動することだと思います。mouseleavea

これにより、次のような結果が得られます。

$('.popup_toggle').mouseenter(function() {
    // Clear any pending "hide" timer
    // Set a show timer
});

$('.popup_toggle').mouseleave(function() {
    // Clear any pending "show" timer
    // Set a hide timer
});

$('.popup_div').mouseenter(function() {
    // Clear any pending "hide" timer
});

.popup_toggleイベントとイベントの両方から同じタイマーにアクセスする必要があることに注意してください.popup_div。これを支援するために、 Ben Alman のdoTimeoutプラグインの使用を検討することをお勧めします。setTimeout(通常) /を手動で操作するよりも、はるかに明確なコードが得られますclearTimeout。

于 2011-10-11T11:44:25.540 に答える
1

それはおそらくうまくいかないでしょう...いいえ。mouseenter要素にandmouseleaveコールバックも追加し<div>、他のコールバックにイベントの処理方法を伝えるグローバル変数を設定することをお勧めします。つまり、「グローバル変数が true の場合、mouseleave でポップアップを非表示にしないでください。ポップアップを隠す」またはこのようなもの。

mouseleaveもう 1 つの方法は、コールバックがポップアップを非表示にしようとしたときに、マウスがポップアップ内にあるかどうかを確認することです。ただし、それは価値があるよりもはるかに多くの作業になる可能性があります。

于 2011-10-11T11:05:32.653 に答える