Question

我有一个水平菜单。该子菜单显示在ul之外。当我将鼠标悬停在特定的类（例如.p_over）时，我希望.submenu-div能够显示。当我悬停.submenu-div时，我希望它仍然存在。但是，当我将鼠标移动到.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

在slideUp内设置setTimeout函数，以便在子菜单内部清除超时（并停止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);
});

jquery显示子菜单，同时悬停

1 个答案: