jquery - マウスエンターのユニオンjquery

Question

ドロップダウン サブメニューがある Nav があります。ドロップダウンが表示されたら、次のようなメニュー + ドロップダウンの結合が必要です。

マウスがこのピンク色のブロック全体を出ると、サブ ナビゲーションが消えるようにします。現在、マウスがドロップダウンのみを終了すると、ドロップダウンはなくなります。この例を見ましたが、クラスを組み合わせてもうまくいきませんでした。

ここに私のフィドルがあります

Answer 1

Why don't just remove the subClass from targets of both mouseenter AND mouseleave? Like this:

var animate;
$(".myClass").mouseenter(function () {
  clearTimeout(animate);
  $('.myClass').css('background-color','#777');
  $('.mySubClass').css('display','inline');
});
$(".myClass").mouseleave(function() {
  animate = setTimeout(function(){
    $('.myClass .mySubClass').css('display','none');
    $('.myClass').css('background-color','#49616a');
  }, 800);
});​

... as .myClass covered area IS already a union of menu and drop (as the corresponding element includes both link and dropdown menu).

I've fixed another potential bug here: it's possible to sequence mouseleave-mouseenter events too fast, then timeout function will fire even though it shouldn't (as the cursor stays in the menu area). To prevent this, an additional variable (animate) has been added; it stored the timeout in the mouseleave handler and clears it in the `mouseenter' one.