JavaScript アニメーション ドロップダウン メニュー

Question

メインメニューのサブメニューとして機能するドロップダウンメニューを作成しようとしています。サブメニューは、項目/リンクを含む単純な div 要素です。メイン メニュー項目をクリックすると、サブメニューがドロップダウンし、そこに留まります。これはすべて簡単ですが、カーソルがサブメニューから離れた場合は、サブメニューを上にスライドさせて元に戻したいと思います。言い換えれば、単純な「マウスアウト」イベントです。ただし、カーソルがサブメニュー内の項目のいずれかに入ると、「mouseout」イベントがトリガーされるようです。考えてみれば、カーソルは境界から出ていないにもかかわらず、サブメニュー要素から離れることになるため、これは例外です。ただし、カーソルがサブメニュー要素の境界外に移動した場合にのみイベントを発生させたいので、これには問題が発生します。

要するに、次のように、ある div を別の div の中に入れるということです。

----------------------------
|          DIV-1           |
|                          |
|      -------------       |
|      |           |       |
|      |   DIV-2   |       |   AREA OUTSIDE DIV-1
|      |           |       |
|      |           |       |
|      |           |       |
|      -------------       |
|                          |
|                          |
----------------------------

さて、次の 2 つのことが原因で DIV-1 が「mouseout」イベントを発生させる可能性があります。

1. カーソルは DIV-1 の境界内から境界外の領域に移動します。
2. カーソルが DIV-1 の境界内から DIV-2 の領域に移動します

私の目標は、これら 2 つの出来事を互いに区別できるようになることですが、その方法はまだわかりません。

この問題に対する良い解決策を持っている人はいますか?これは十分に一般的な機能であるため、誰かが解決したに違いありません。

Answer 1

子要素バブルからのマウスオーバーイベントが/親に伝播しているので、私は非ライブラリのルートを行っていた場合は、

は、私は、サブメニューのdiv要素のonmouseoverイベントでキャンセルされるタイマーを使用することになります：

var hideMenuTimer;
subMenuDiv.onmouseover = function () {
    window.clearTimeout(hideMenuTimer);
}
subMenuDiv.onmouseout = function (evt) {
    evt = evt || window.event;
    if ((evt.target || evt.srcElement).id == "subMenuDiv")
        hideMenuTimer = window.setTimeout(function () {
            subMenuDiv.style.display = "none";
        }, 300);
}

非常に簡単な例が、それは、サブメニューのすべてのサブ要素が正しくsubMenuDiv要素にバブルonmouseoverイベントは、その後、タイマーがポーリング前にキャンセルされたDIV提供し、動作するはずです。私はそれはあなたが誤ってマウスアウト場合は戻ってそれを隠す前でマウスを得るために、短いウィンドウを持つようにこの種のものを持っているのがベストだと思うので、また、私は300msのタイムアウトを入れています。あなたはそれが瞬時に非表示にしたい場合は、0msとに設定すると、あまりにも正常に動作する必要があります。

Answer 2

http://users.tpg.com.au/j_birch/plugins/ SUPERFISH / の< - 自分で時間を節約し、彼はすでにあなたのための彼の髪を引き抜く（多分文字通り、しかし、知らないではない）。