Javascript 带有jQuery mouseleave的下拉列表，鼠标指针问题

当我将鼠标悬停在内容区域时，下拉超时未清除。我不想在悬停时隐藏内容区域。解决这个问题，这次我真的要搞糊涂了。 HTML

JS

钢笔：

将var计时器移到方法的顶部

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

---

超时正在工作，请检查代码笔一次。现在，内容并没有像问题所说的那样被隐藏

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

$("[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);
        });
    });
});

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