带有jQuery mouseleave的下拉菜单，mouseenter问题

Question

My dropdown timeout not clear out when i hover the content area. I don't want to hide content area on hover. Solve this i'm going really confuse this time. 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

Move the var timer to the top of your method.

// Move the timer to here
var timer;
$("[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("mouseout", function () {
        // Should not be var
        timer = setTimeout(function () {
            _drp_content.removeClass("drp-show");
        }, 1000);
        $(_drp_content).on("mouseenter", function () {
            clearTimeout(timer);
        });
    });
});