Dropdown mit jQuery mouseleave, mouseenter issue

Question

Mein Dropdown-Timeout nicht gelöscht, wenn ich den Inhaltsbereich schweben. Ich möchte den Inhaltsbereich beim Hover nicht ausblenden. Löse das, ich werde dieses Mal wirklich verwirrt sein. 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 _drp_x = $(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_x, _drp_content).click(function (event) { 
     event.stopPropagation(); 
    }); 
    $(_drp_x, _drp_content).on("mouseleave", function() { 
     var timer = setTimeout(function() { 
      _drp_content.removeClass("drp-show"); 
     }, 1000); 
     $(_drp_content).on("mouseenter", function() { 
      clearTimeout(timer); 
     }); 
    }); 
}); 

Answer 1

Pen: https://codepen.io/anon/pen/GEvEZZ

Bewegen Sie den var-Timer an die Spitze Ihrer Methode.