подменю дисплея jquery во время зависания

Question

У меня есть горизонтальное меню. Это подменю отображается за пределами ul. Когда я нахожу определенный класс (например .p_over), я хочу, чтобы .submenu-div был appaer. Когда я нависаю .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 во второй из последней строки. Это количество времени в миллисекундах. На этом этапе вам нужно будет поместить подменю в соответствие с меню.

Вот очень грубый 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); 
});