jQueryドロップダウンメニューでホバーがうまく機能しない

Question

jQueryでホバードロップダウンメニューを作成しました。私は.mouseenter,.mouseleaveイベントを使用します。しかし、問題は、コンテンツエリアが隠れていないホバーボタンを離れるときです。

HTML

<button data-drp-hover="mynewid">HOVER</button> 
<div class="drp-content" data-drp-content="mynewid"> 
    <span>Item 1</span> 
    <span>Item 1</span> 
    <span>Item 1</span> 
    <span>Item 1</span> 
    <span>Item 1</span> 
</div> 

CSS

​​

JS

$("[data-drp-hover]").mouseenter(function(){ 
    var root = $(this); 
    var _drp_container = $(this).attr("data-drp-hover"); 
    var _drp_content = $('[data-drp-content="' + _drp_container + '"]'); 
    _drp_content.addClass("drp-show"); 
    _drp_content.siblings().removeClass("drp-show"); 

    $(document).click(function(event){ 
    _drp_content.removeClass("drp-show"); 
    }); 

    $(_drp_content).click(function(event){ 
    event.stopPropagation(); 
    }); 

    $(_drp_content).mouseleave(function(){ 
    var timer = setTimeout(function(){ 
     _drp_content.removeClass("drp-show"); 
    }, 1000); 

    $(_drp_content).mouseenter(function(){ 
     clearTimeout(timer); 
    }); 

    }); 
}); 

Answer 1

それはあなたがそこにタイマーを持ってbecuase、秒後に非表示のタイマーを削除して、それがここで正常に動作しているんフィドルhttps://jsfiddle.net/5qn6pdv9/

これは更新されたjs

$("[data-drp-hover]").mouseenter(function() { 
    var root = $(this); 
    var _drp_container = $(this).attr("data-drp-hover"); 
    var _drp_content = $('[data-drp-content="' + _drp_container + '"]'); 
    _drp_content.addClass("drp-show"); 
    _drp_content.siblings().removeClass("drp-show"); 
    $(document).click(function (event) { 
     _drp_content.removeClass("drp-show"); 
    }); 
    $(_drp_content).click(function (event) { 
     event.stopPropagation(); 
    }); 
    $(_drp_content).mouseleave(function() { 

     _drp_content.removeClass("drp-show"); 

     $(_drp_content).mouseenter(function() { 
      clearTimeout(timer); 
     }); 
    }); 
}); 

です。