悬停的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

[data-drp-content] {
  display:none;
}
.drp-show[data-drp-content] {
  display: block;
}

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