Jquery hover() и анимация выпадающего меню.
118
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>
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46842 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30317 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22966 visits
- Как через css изменить цвет png изображения? 10190 visits
- Blob video url download 9809 visits
- Php curl запрос через прокси с авторизацией 9070 visits
- Работа с captcha vk api 7987 visits
© "hostciti.net" 16.5.2024 | 08:00