Here is the menu: https://jsfiddle.net/b5uma4re/2/ If you hover and remove the mouse pointer on the About tab several times, the submenu will exit several times. How to make the submenu react only if the pointer is 500 milliseconds? that is, if the pointer lasted 400 milliseconds and was removed, then the submenu does not appear.

$(document).ready(function(){ $('.w1').hover( function(){ $(this).find('.q1').delay(500).slideToggle(); }, function(){ $(this).find('.q1').delay(500).slideToggle(); }); }); 
 * { box-sizing: border-box; margin: 0; padding: 0; } .cont{ font-size: 0; border: 1px black solid; } a{ text-decoration: none; line-height: 40px; padding: 0 20px; } .q1{ position: absolute; border: 1px black solid; width: 165px; display: none; } .q1 li{ border-top: 1px gray solid; display: block; } .w1{ font-size: 16px; border-left: 1px black solid; display: inline-block; position: relative; } .w2{ position: relative; } .w3{ position: relative; } .q2, .q3{ top: 0; left: 100%; position: absolute; border: 1px black solid; width: 210px; display: none; } li:hover{ background: #EEEEEE; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="cont"> <li class="w1"><a href="#">Домой</a></li><!-----------------------> <li class="w1"><a href="#">О нас +</a><!-----------------------> <ul class="q1 fir"><li><a href="#">Наша история</a></li> <li><a href="#">Как нас найти</a></li> <li><a href="#">Час работы</a></li> </ul></li><!-----------------------> <li class="w1"><a href="#">Наши товары +</a> <ul class="q1"> <li class="w2"><a href="#">+ Штуковины</a> <ul class="q2"> <li><a href="#">Простая штуковина</a></li> <li><a href="#">Стандартная штуковина</a></li> <li><a href="#">Продвинутая штуковина</a></li> </ul></li> <li class="w2"><a href="#">+ Гаджеты</a> <ul class="q2"> <li><a href="#">Простой гаджет</a></li> <li><a href="#">Стандартный гаджет</a></li> <li class="w3"><a href="#">+ Продвинутый гаджет</a> <ul class="q3"> <li><a href="#">Продвинутый гаджет A</a></li> <li><a href="#">Продвинутый гаджет Б</a></li> </ul></li> </ul></li> <li><a href="#">Машини времени</a></li> </ul></li> </ul>

  • setTimeout() ? - teran
  • $ (this) .find ('. q1'). setTimeout (500) .delay (500) .slideToggle (); That doesn't work - PeGaS
  • duck and should not. setTimeout is a regular JS-function, one of the parameters of which will be the time after which it is triggered, and the second is callback, which is launched after this time. - teran
  • @teran Help apply to my example - PeGaS

1 answer 1

Likely, like this, using the .stop () method to stop the current animation :

 $(document).ready(function(){ $('.w1').hover( function(){ $(this).find('.q1').stop(true, true).delay(500).slideDown(); }, function(){ $(this).find('.q1').stop(true, true).delay(500).slideUp(); }); }); 
 * { box-sizing: border-box; margin: 0; padding: 0; } .cont{ font-size: 0; border: 1px black solid; } a{ text-decoration: none; line-height: 40px; padding: 0 20px; } .q1{ position: absolute; border: 1px black solid; width: 165px; display: none; } .q1 li{ border-top: 1px gray solid; display: block; } .w1{ font-size: 16px; border-left: 1px black solid; display: inline-block; position: relative; } .w2{ position: relative; } .w3{ position: relative; } .q2, .q3{ top: 0; left: 100%; position: absolute; border: 1px black solid; width: 210px; display: none; } li:hover{ background: #EEEEEE; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="cont"> <li class="w1"><a href="#">Домой</a></li><!-----------------------> <li class="w1"><a href="#">О нас +</a><!-----------------------> <ul class="q1 fir"><li><a href="#">Наша история</a></li> <li><a href="#">Как нас найти</a></li> <li><a href="#">Час работы</a></li> </ul></li><!-----------------------> <li class="w1"><a href="#">Наши товары +</a> <ul class="q1"> <li class="w2"><a href="#">+ Штуковины</a> <ul class="q2"> <li><a href="#">Простая штуковина</a></li> <li><a href="#">Стандартная штуковина</a></li> <li><a href="#">Продвинутая штуковина</a></li> </ul></li> <li class="w2"><a href="#">+ Гаджеты</a> <ul class="q2"> <li><a href="#">Простой гаджет</a></li> <li><a href="#">Стандартный гаджет</a></li> <li class="w3"><a href="#">+ Продвинутый гаджет</a> <ul class="q3"> <li><a href="#">Продвинутый гаджет A</a></li> <li><a href="#">Продвинутый гаджет Б</a></li> </ul></li> </ul></li> <li><a href="#">Машини времени</a></li> </ul></li> </ul>

  • There is only one thing left : here is almost a working version: jsfiddle.net/b5uma4re/8 One thing remains - if you quickly move the cursor and remove the submenu, everything reacts smoothly, although it should only respond to hold the cursor for 500 milliseconds - PeGaS
  • @PeGaS are you sure? nothing here is shown if you hover and remove. - teran