Good evening, there is a js code that, when you hover over an item in the list, shows a submenu. But if you quickly remove and remove the mouse from the limits of the block, you get an accordion effect, the menu performs as many full code cycles as I did. How to disable the execution of the code before the last time is over?

function dropDownMenu() { $(this).children('img').toggleClass('chevron-rotate'); $(this).children('.dropdown-ul').slideToggle(250); } $('.dropdown-li').on({ mouseenter: dropDownMenu, mouseleave: dropDownMenu }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li><a href="index.html">Главная</a></li> <li class="dropdown-li"> <a href="#">О нас</a> <img src="img/chevron-white.png" alt=""> <ul class="dropdown-ul"> <li><a href="#">О компании</a></li> <li><a href="#">Мероприятия</a></li> <li><a href="#">Сертификаты</a></li> <li><a href="#">Награды</a></li> <li><a href="#">Вопрос-ответ</a></li> </ul> </li> <li class="dropdown-li"> <a href="#">Программы</a> <img src="img/chevron-white.png" alt=""> <ul class="dropdown-ul"> <li><a href="#">Для похудения</a></li> <li><a href="#">Для здоровья</a></li> </ul> </li> <ul>

I tried to write a condition using flags, but did not help. I work with js quite recently, I can not understand what does not work

 function dropDownMenu() { var flag = true; if (flag){ $(this).children('img').addClass('chevron-rotate'); $(this).children('.dropdown-ul').slideToggle(250); var flag = false; } else{ $(this).children('img').removeClass('chevron-rotate'); $(this).children('.dropdown-ul').slideToggle(250); var flag = true; } }

    1 answer 1

    Better, probably, to stop the previous animation.

     function dropDownMenu() { $(this).children('.dropdown-ul').stop(); $(this).children('img').toggleClass('chevron-rotate'); $(this).children('.dropdown-ul').slideToggle(250); }

    With flag (it works bad):

     var sliding = false; function dropDownMenu() { if (!sliding) { sliding = true; $(this).children('img').toggleClass('chevron-rotate'); $(this).children('.dropdown-ul').slideToggle(250, function(){ sliding = false; }); } } 

     function dropDownMenu() { $(this).children('.dropdown-ul').stop(); $(this).children('img').toggleClass('chevron-rotate'); $(this).children('.dropdown-ul').slideToggle(250); } $('.dropdown-li').on({ mouseenter: dropDownMenu, mouseleave: dropDownMenu }) 
     .dropdown-ul { display:none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li><a href="index.html">Главная</a></li> <li class="dropdown-li"> <a href="#">О нас</a> <img src="img/chevron-white.png" alt=""> <ul class="dropdown-ul"> <li><a href="#">О компании</a></li> <li><a href="#">Мероприятия</a></li> <li><a href="#">Сертификаты</a></li> <li><a href="#">Награды</a></li> <li><a href="#">Вопрос-ответ</a></li> </ul> </li> <li class="dropdown-li"> <a href="#">Программы</a> <img src="img/chevron-white.png" alt=""> <ul class="dropdown-ul"> <li><a href="#">Для похудения</a></li> <li><a href="#">Для здоровья</a></li> </ul> </li> <ul>

    • I tried to write a condition using flags, but did not help. I work with js quite recently, I can not understand what does not work - Tolik
    • and it is possible to make it so that when you take away the mouse, the menu caused by hiding is hidden, otherwise they run into each other a bit ( prntscr.com/is6lf9 ) - Tolik
    • @ Tolik It's time to ask a question with sample code and markup - pay attention to the button "Code snippet ..." in the question editor. - Igor