javascript - 当没有超时悬停时，菜单应该隐藏

Question

我想要完成的是有一个菜单，当单击“按钮”时会显示（按钮和菜单位于不同的元素中，因此鼠标最初不会悬停在菜单上）。

如果在超时期间没有悬停在菜单上，则菜单应自行隐藏（目前它会这样做，但仅在第一次单击时）。

另外，如果元素悬停，我想在鼠标悬停时隐藏并清除计时器并再次单击按钮将重置超时（它可能不会重置？）。

我已经尝试了几种化身，但我尝试过的任何一种行为都没有正确，正在寻求建议。这是我目前正在使用的：

var mytimer = window.setTimeout(function() {$('.menu-div').slideUp(function() {
        window.clearTimeout(this.mytimer);
})
}, 5000);

$().ready(function(){

    $('#menu-button').click(function () {
        $('.menu-div').slideDown();
        $(mytimer);
    });

    $('.menu-div').mouseenter(function() {
       window.clearTimeout(this.mytimer);
    });

    $('.menu-div').mouseout(function() {
        $('.menu-div').slideUp(200);
    });
});

Answer 1

我认为您想要这样的东西（只是猜测，因为您没有提供任何 HTML）

$(function(){
    var mytimer=0;  
    $('#menu-button').click(function () {
        $('.menu-div').slideDown();
        mytimer = setTimeout(function(){
            $('.menu-div').slideUp();
        }, 5000);
    });

    $('.menu-div').mouseenter(function() {
        clearTimeout(mytimer);
    });

    $('.menu-div').mouseleave(function() {
        $('.menu-div').slideUp();
    });
});

演示。