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); 
     }); 
    }); 
});