created: 2025/01/13,
modified: 2025/01/13
メニューから少しでもマウスカーソルが外れてしまうと、閉じてイラッとすることがあります。メニューが閉じる前にわずかに待つようにする動作を入れるには setTimeout を使い実現します。
タイマーを制御するために、グローバルまたはスコープ内の変数を用意します
マウスが要素に入ったとき、タイマーをクリア (clearTimeout) して、プルダウンメニューを即座に表示します。
マウスが要素から離れた際に、setTimeout を使用して一定時間後にメニューを閉じる処理を実行します。この例では 200 ミリ秒待機しています。
タイマーをクリアしないと、マウスの動きに関係なく指定した待機時間後にメニューが閉じる動作が発生してしまいます。
さっき失敗したのは、マウスを移動した際に、隣の .with-child 要素にカーソルが移動すると、mouseleave イベントが適切に発火しないことが原因です。
各 .with-child 要素ごとに個別の動作を設定することで、隣接要素間の問題を解消しやすくなります。
$menuItem.find('> ul') を使用して、対象の子要素のみを操作
アニメーションを途中で停止し、キューをクリアすることでスムーズな表示/非表示を実現。
setTimeout を使用して、mouseleave で少し遅らせてからメニューを閉じます。
この方法を使うと、ユーザーがメニューから少し外れて再度戻る場合でも、メニューがすぐに閉じるのを防ぐことができます。