jquery在悬停时显示子菜单

Question

我有一个水平菜单。此子菜单显示在 ul 之外。当我将鼠标悬停在特定类（例如 .p_over）时，我希望 .submenu-div 出现。当我悬停 .submenu-div 时，我希望它仍然存在。但是，当我的鼠标从 .p_over 移动到 .submenu-div 时，它消失了。

<ul class="menu">
        <li id="li_arrow_right" class="p_over"><a href="pages/over.php">Over <span>&#59230;</span></a></li>
        <li id="li_arrow_right" class="p_projecten"><a href="pages/projecten.php">Onze projecten<span>&#59230;</span></a></li>
        <li id="li_arrow_right" class="p_nieuws"><a href="pages/nieuws.php">Nieuws<span>&#59230;</span></a></li>
        <li><a href="pages/contact.php">Contact</a></li>
    </ul>
    <span id="link_search"><a href="#">&#128269;</a></span>
    <div class="btn_small" id="btn_arrow_right">Vragenlijsten<span>&#59230;</span></div>

    <div class="submenu">
        <ul class="ul_submenu">
            <li id="li_arrow_right"><a href="over.php">Wie zijn wij?<span>&#59230;</span></a></li>
            <li id="li_arrow_right"><a href="projecten.php">Wat bieden wij?<span>&#59230;</span></a></li>
            <li id="li_arrow_right"><a href="nieuws.php">Wie bent u?<span>&#59230;</span></a></li>
        </ul>
    </div>

我的 jquery

<script type="text/javascript">
$('.p_over').hover(function(){
    $('.submenu').slideDown(50);        
},
function(){
    $('.submenu').slideUp(50);          
});
</script>

谢谢！

Answer 1

在setTimeout 中创建slideUp 函数，这样如果悬停在子菜单上，您可以清除超时（并停止slideUp）。如果您想在子菜单消失之前让用户有更多时间进入子菜单，只需更改倒数第二行中的250。这是以毫秒为单位的时间量。此时，您所要做的就是根据菜单定位子菜单。

这里是一个很粗糙的DEMO

var t;
$('.p_over, .submenu').on('mouseenter', function(){
    if(t){
        clearTimeout(t);
        t = false;
    }
    $('.submenu').slideDown(50);
}).on('mouseleave', function(){
    t = setTimeout(function(){
        $('.submenu').slideUp(50);
    }, 250);
});