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

它之後第二個隱藏監守你有一個計時器出現，去掉計時器，它工作正常這裏是小提琴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); 
     }); 
    }); 
});