0

私はjQueryを初めて使用し、作成しようとしているナビゲーションバーに複数の要素を選択する方法を知りたいと思っています。ユーザーのマウスがナビゲーションバーの項目の上にあるのか、ドロップダウンメニューの上にあるのかを確認してもらいたいです（そうしないと、ドロップダウンメニューが消えてしまいます）。私は使用しようとしました： $('#nav_item_1').mouseenter(function(){
//make the drop down menu visible and change nav_item background here
});
`

$('#nav_item_1,#dropdown').mouseleave({
    //revert everything back to normal
});

しかし、ナビゲーションバーの項目からドロップダウンメニューにマウスを移動しようとすると、すべてが通常の状態に戻ります。

4

2 に答える 2

0

あなたが抱えている問題は、ナビゲーションバーの項目を離れると.mouseleaveすぐにトリガーされ、それで が非表示#dropdownになるためです。

ここで行うことはnav_item、ドロップダウンを非表示にするために、mouseleave イベントに約 0.5 秒以下のわずかなタイムアウトを設定することです。これにより、ユーザーはドロップダウンにカーソルを合わせることができるように、ナビゲーション バーの外に設定された秒数を使用できます。ユーザーがオンになった後#dropdown、タイムアウトをクリアして、ドロップダウンの非表示の通常の動作を防ぎます。

コードでこれをどのように行いますか？
$('#nav_item_1').mouseleave(function() {
/* set your time out here to return everything to normal. Because we want to allow the dropdown to stay visible for a fraction of time required to move the cursor to the dropdown.*/
});

その後、
$('#dropdown').mouseenter(function() {
// clear the timer to prevent normal behavior (keeping the dropdown visible).
});

このリンクをチェックしてください: http://www.w3schools.com/js/js_timing.asp

複数のアイテムを選択することに関する最初の質問について。あなたはそれを正しくやっています。しかし、上で説明したように、コードmouseleaveは#dropdown.

于 2012-08-18T23:59:14.487 に答える
0

コードの 2 番目の部分は、#nav_item_1 または #dropdown を終了すると、すべてが元に戻るようにします。したがって、#nav_item_1 を離れて #dropdown に移動すると、イベントが発生します。

現在のマウス ターゲットにドロップダウンまたは nav_item が含まれている場合、すべてのマウスの動きを確認できます。

$("#nav_item_1").mouseenter(function () {
  // make menu visible etc
}

$(document).mousemove(function (e) { // note the e parameter
  if ($(e.target).has("#dropdown,#nav_item_1").length !== 0) {
    // revert
  }
}

ただし、これが適切に機能するには、2 つの要素が互いに非常に接近している必要があります。

于 2012-08-19T00:13:30.843 に答える