Как сделать меню, как на сайте citilink.ru?

Question

[Zellar13]

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

$(".dropdown-submenu").on("mouseenter", function(){
    let a = $(this);
    timeout = setTimeout (function(){
      a.addClass("active"),
      a.find('.dropdown-menu_delay').show(500);
    }, 800);
  }),
  $(".dropdown-submenu").on("mouseleave", function(){
    clearTimeout(timeout);
    let a = $(this);
    setTimeout (function(){
    if(a.hasClass("active")){
      a.removeClass("active"),
      a.find('.dropdown-menu_delay').hide(500);
    }}, 800);
  });

Answer 1

[Zellar13]

В общем я сделал, кому нужно, может посмотреть
https://jsfiddle.net/rgLks2fb/

Answer 2

[strelok011]

добавьте еще переменную-флаг. Если она активна, наезд на пункт меню игнорируется.
Взводите ее на первом открывающемся пункте, отключаете по таймауту на выходе.

Comments

[Zellar13]

Не совсем понимаю, как это должно работать в моем коде и куда именно нужно вставлять флаг

[strelok011]

let isOpened = false;
$(".dropdown-submenu").on("mouseenter", function(){
    let a = $(this);
   if (!isOpened) {
    isOpened = true;
    timeout = setTimeout (function(){
      a.addClass("active"),
      a.find('.dropdown-menu_delay').show(500);
    }, 800);
   }
  }),
  $(".dropdown-submenu").on("mouseleave", function(){
    clearTimeout(timeout);
    let a = $(this);
    setTimeout (function(){
    if(a.hasClass("active")){
      a.removeClass("active"),
      a.find('.dropdown-menu_delay').hide(500);
      isOpened = false
    }}, 800);
  });

чтонить такое.

[Zellar13]

strelok011, вообще перестало работать https://jsfiddle.net/u7ah8zjf/

[strelok011]

Надо исправлять.
Я без редактора под рукой. Общая суть, думаю, должна быть понятна.
Пока переменная у нас тру - чтобы таймауты на других блоках не отрабатывали.

Я не знаю, как выглядит весь код, области видимости функций и переменных и т.п. нюансы.

Могу еще посоветовать в ключевые места кода разложить console.log("сейчас был шаг номер..."), ну и отладчиком по шагам пройти выполнение скрипта.

[Zellar13]

Это и есть весь код. Код с флагами срабатывает один раз и перестает работать

[strelok011]

Так и в исходном виде не работает, напутаны запятые с ;
Рабочий код выложите в фиддл, тогда смогу посмотреть

[strelok011]

var isOpened = false;
$(".dropdown-submenu").on("mouseenter", function(){
    let a = $(this);
   if (!isOpened) {
    isOpened = true;
    timeout = setTimeout (function(){
      a.addClass("active");
      a.find('.dropdown-menu_delay').show(500);
    }, 800);
   }
  });
 
  $(".dropdown-submenu").on("mouseleave", function(){
    clearTimeout(timeout);
    let a = $(this);
    setTimeout (function(){
    if(a.hasClass("active")){
      a.removeClass("active");
      a.find('.dropdown-menu_delay').hide(500);
      isOpened = false
    }}, 800);
  });

[Zellar13]

strelok011, https://jsfiddle.net/j67xnq3r/2/ вот работающий код, но как видно, когда с выбранного элемента меню ведешь не прямо, а наискосок к элементу подменю и задеваешь нижний пункт меню, то выбранный пункт меню теряет класс active на долю секунды и снова его получает.

[strelok011]

отменяйте таймаут
Как отменить setTimeout в обработчике событий?
тогда не будет двойного мелькания на повторном наведении.
Продумать логику надеюсь получится

[Zellar13]

strelok011, так я и так отменяю setTimeout, только все равно происходит это мелькание. Либо я не правильно это делаю

[strelok011]

нет, не отменяете. Посмотрите ссылку. Нужно до окончания таймера таймаута его прервать. Для этого есть функция clearTimeout. Почитайте по ссылке, там пример есть.

[Zellar13]

strelok011, Прочитал, попробовал clearTimeout срабатывает раньше чем setTimeout

[strelok011]

если я не ошибаюсь - не там поставили :)

Надо отменять закрывающий таймаут, если фокус ушел с блока и вернулся (как мне кажется :) )

[Zellar13]

strelok011, Не совсем понимаю как это сделать. Можете привести пример. Как я понял у меня повторно добавляется класс, когда мышь переходит на потомка.