JQuery отображать подменю при наведении

Question

У меня есть горизонтальное меню. Это подменю отображается за пределами ул. Когда я наведу курсор на определенный класс (например,.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

Сделать slideUp функция внутри setTimeout так что внутри подменю вы можете очистить тайм-аут (и остановить slideUp) если оно зависло Если вы хотите предоставить пользователю больше времени для перехода в подменю, прежде чем оно исчезнет, ​​просто измените 250 во второй из последней строки. Это количество времени в миллисекундах. На данный момент все, что вам нужно сделать, это расположить подменю в соответствии с меню.

Вот действительно грубая ДЕМО

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