Jquery hover() и анимация выпадающего меню.

143

16 декабря 2017, 08:15

Добрый день! Пытаюсь постигнуть азы Jquery и склепал небольшой скриптик для выпадающего меню по ховеру, но выпадает меню столько, сколько раз провел мышкой, получается такой веселый аккордеон.
Я понял что это относится к очередности анимации и ее нужно очищать, но куда прикрутить и какой метод пока не понимаю, посоветуйте что в данном случае лучше использовать?

  $(function(){
    $('.menu__subList').hide();
    $('.menu__item').hover(
      function(){
          $(this).find('.menu__link').addClass('menu__link_active');
          $(this).find('.menu__subList').slideDown();
      },
      function(){
          $(this).find('.menu__link').removeClass('menu__link_active');
          $(this).find('.menu__subList').slideUp('fast');
      });
  });

https://jsfiddle.net/coa685tu/

Answer 1

$(".parent li").hover(function() { 
    $(this).find(".child").stop().slideToggle(300); 
})

ul.parent > li{ 
    position:relative; 
    float:left; 
    list-style:none; 
    margin:15px; 
} 
ul.child{ 
    position:absolute; 
    left:0; 
    padding:0; 
    list-style:none; 
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="parent"> 
    <li>ITEM 1 
        <ul class="child"> 
            <li>item 1</li> 
            <li>item 2</li> 
            <li>item 3</li> 
        </ul> 
    </li> 
    <li>ITEM 2</li> 
    <li>ITEM 2</li> 
</ul>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Нижний регистр в autocomplit

Всем привет, сделал autocomplit для своего веб приложения, проблема вот в чем, в БД все данные kiz с большой буквы (ИК62), можно ли как-то сделать так,...

196

PHP