As when hovering over an item, expand / collapse the list, but so that during a quick repetition of the game / spread it does not get in the queue. Performed once

Question

There are several drop-down lists; I apply jquery.ui effects to them. When hovering, I expand the list, and when I move, I turn it off. And everything would be fine, but with repeated repetitions, the lists begin to hang out here and there.

This is not a mistake but annoying, how to make the lists behave as if we wrote it on css (I will not use css, js is needed). That is, no matter how many times we put on the list, only the last action worked and it interrupted the execution of the rest. (I can’t figure it out until the end, but it seems to be so correct, that is, it didn’t block for the duration of the function, but rather interrupted the previous one.

Now it turns out that the execution of functions is in the queue

I tried to create an array, on hover checking whether there is a current element in it, if not, then perform the functions and add, and when uvondenii, delete. Such an array of flags, but the result is the same: jump

$('.filter-item').hover(function() { var dd_menu = $(this); setTimeout(function() { dd_menu.addClass('open'); }, 50); dd_menu.children('.dropdown-menu').slideDown(200); }, function() { $('.filter-item').removeClass('open').children('.dropdown-menu').slideUp(300, function() { $(this).closest('.filter-item').removeClass('open'); }); });

 .top_row { display: flex; } ul.dropdown-menu { display: none; padding: 0; margin: 0; } ul.dropdown-menu>li { padding: 0; margin: 0; list-style: none; } label { cursor: pointer; } .btn-group { width: calc(100% / 6); } label.param-wprapper input { display: none; } label.param-wprapper input:checked+span { font-weight: bold; } button.btn.btn-default.dropdown-toggle { display: block; width: 100%; background: #fff; border: 1px solid #ccc; padding: 8px; border-radius: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="top_row"> <div class="btn-group filter-item field_transaction_type active" data-filter="field_transaction_type"> <button class="btn btn-default dropdown-toggle" data-default="Купить"><span class="value">Купить</span> </button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_transaction_type" type="radio" value="100"><span>Купить</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_transaction_type" type="radio" value="99"><span>Снять</span></label></li> </ul> </div> <div class="btn-group filter-item field_catalog active" data-filter="field_catalog"> <button class="btn btn-default dropdown-toggle" data-default="Квартиру"><span class="value">Квартиру</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="23"><span>Квартиру</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="93"><span>Комнату</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="24"><span>Частный дом</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="68"><span>Коммерческая</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="94"><span>Земельный участок</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="95"><span>Гараж</span></label></li> </ul> </div> <div class="btn-group filter-item field_apartment_type visible active" data-filter="field_apartment_type"> <button class="btn btn-default dropdown-toggle" data-default="Вторичка"><span class="value">Вторичка</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_apartment_type" type="radio" value="oldbuild"><span>Вторичка</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_apartment_type" type="radio" value="newbuild"><span>Новостройка</span></label></li> </ul> </div> <div class="btn-group filter-item field_type_commece" data-filter="field_type_commece"><button class="btn btn-default dropdown-toggle" data-default="Тип объекта"><span class="value">Тип объекта</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="106"><span>Автосервис</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="107"><span>Гостиница</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="104"><span>Готовый бизнес</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="96"><span>Офис</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="105"><span>Свободн. назначения</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="102"><span>Производство</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="98"><span>Склад</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="97"><span>Торговое помещ.</span></label></li> </ul> </div> <div class="btn-group filter-item field_rooms visible" data-filter="field_rooms"> <button class="btn btn-default dropdown-toggle" data-default="Комнат"><span class="value">Комнат</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="25"><span>Студия</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="26"><span>1</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="27"><span>2</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="28"><span>3</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="29"><span>4</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="30"><span>4+</span></label></li> </ul> </div> <div class="btn-group filter-item field_district" data-filter="field_district"> <button class="btn btn-default dropdown-toggle" data-default="Район"><span class="value">Район</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_district" type="checkbox" value="41"><span>Дзержинский</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_district" type="checkbox" value="45"><span>Ленинский</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_district" type="checkbox" value="42"><span>Промышленный</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_district" type="checkbox" value="31"><span>Центральный</span></label></li> </ul> </div> </div>

Sergey Nudnov Sergey Nudnov 3,460 one 6 17 · Answer 1 · 2019-04-22T23:06:10

I simplified a bit and leveled the functionality. And introduced the concept of buffer time. If the menu item has been switched only recently, it will not do it again.

At the same time, if we switch to another menu item, and this item has been switched for a long time, it turns off the rest of the items, and turns on itself.

The delay is determined by the bufferTime variable.

 function openMenu(dd_menu) { dd_menu.children('.dropdown-menu').slideDown(200, function() { dd_menu.addClass('open'); } ); } function closeMenu(dd_menu) { dd_menu.children('.dropdown-menu').slideUp(300, function() { dd_menu.removeClass('open'); } ); } var bufferTime = 500 //ms $('.filter-item').hover( function() { var dd_menu = $(this); var currTime = (new Date()).getTime(); var delta = currTime - dd_menu.attr('data-action-time')||5000; dd_menu.attr('data-action-time', currTime); if (delta > bufferTime) { $('.filter-item').not(dd_menu).each(function() { closeMenu($(this)); }); openMenu(dd_menu); } }, function() { var dd_menu = $(this); var currTime = (new Date()).getTime(); var delta = currTime - dd_menu.attr('data-action-time')||5000; dd_menu.attr('data-action-time', currTime); if (delta > bufferTime) { closeMenu(dd_menu); } } );

 .top_row { display: flex; } ul.dropdown-menu { display: none; padding: 0; margin: 0; } ul.dropdown-menu>li { padding: 0; margin: 0; list-style: none; } label { cursor: pointer; } .btn-group { width: calc(100% / 6); } label.param-wprapper input { display: none; } label.param-wprapper input:checked+span { font-weight: bold; } button.btn.btn-default.dropdown-toggle { display: block; width: 100%; background: #fff; border: 1px solid #ccc; padding: 8px; border-radius: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="top_row"> <div class="btn-group filter-item field_transaction_type active" data-filter="field_transaction_type" data-action-time="0"> <button class="btn btn-default dropdown-toggle" data-default="Купить"><span class="value">Купить</span> </button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_transaction_type" type="radio" value="100"><span>Купить</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_transaction_type" type="radio" value="99"><span>Снять</span></label></li> </ul> </div> <div class="btn-group filter-item field_catalog active" data-filter="field_catalog"> <button class="btn btn-default dropdown-toggle" data-default="Квартиру"><span class="value">Квартиру</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="23"><span>Квартиру</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="93"><span>Комнату</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="24"><span>Частный дом</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="68"><span>Коммерческая</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="94"><span>Земельный участок</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_catalog" type="radio" value="95"><span>Гараж</span></label></li> </ul> </div> <div class="btn-group filter-item field_apartment_type visible active" data-filter="field_apartment_type"> <button class="btn btn-default dropdown-toggle" data-default="Вторичка"><span class="value">Вторичка</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_apartment_type" type="radio" value="oldbuild"><span>Вторичка</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_apartment_type" type="radio" value="newbuild"><span>Новостройка</span></label></li> </ul> </div> <div class="btn-group filter-item field_type_commece" data-filter="field_type_commece"><button class="btn btn-default dropdown-toggle" data-default="Тип объекта"><span class="value">Тип объекта</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="106"><span>Автосервис</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="107"><span>Гостиница</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="104"><span>Готовый бизнес</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="96"><span>Офис</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="105"><span>Свободн. назначения</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="102"><span>Производство</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="98"><span>Склад</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_type_commece" type="radio" value="97"><span>Торговое помещ.</span></label></li> </ul> </div> <div class="btn-group filter-item field_rooms visible" data-filter="field_rooms"> <button class="btn btn-default dropdown-toggle" data-default="Комнат"><span class="value">Комнат</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="25"><span>Студия</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="26"><span>1</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="27"><span>2</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="28"><span>3</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="29"><span>4</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_rooms" type="checkbox" value="30"><span>4+</span></label></li> </ul> </div> <div class="btn-group filter-item field_district" data-filter="field_district"> <button class="btn btn-default dropdown-toggle" data-default="Район"><span class="value">Район</span></button> <ul class="dropdown-menu"> <li class="item"><label class="param-wprapper"><input name="field_district" type="checkbox" value="41"><span>Дзержинский</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_district" type="checkbox" value="45"><span>Ленинский</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_district" type="checkbox" value="42"><span>Промышленный</span></label></li> <li class="item"><label class="param-wprapper"><input name="field_district" type="checkbox" value="31"><span>Центральный</span></label></li> </ul> </div> </div>

If you quickly enough to spend on the elements, then go back to the beginning and stop, then the drop-down menu will not work on the element on which we are located.
It seems then I will redo all the same on css)) I tried different options, added an additional class slide and returned false in the guidance function, if this class exists.

As when hovering over an item, expand / collapse the list, but so that during a quick repetition of the game / spread it does not get in the queue. Performed once

1 answer 1

More articles: