Эффект гармошки в меню

245

17 марта 2018, 19:21

Добрый вечер, есть js код который при наведении на элемент списка, показывает подменю. Но если быстро выводить и убирать мышку с пределов блока , то получается эффект гармошки, меню выполняет столько полных циклов кода, столько я раз сделал. Как запретить выполнение кода, пока прошлый раз не закончился?

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>

я попробовал написать условие с использованием флагов, но не помогло. С js работаю совсем недавно, не могу понять чего не работает

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

Answer 1

Лучше, наверное, остановить предыдущую анимацию.

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

С флагом (работает плохо):

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>