[Leon2110]

Всем привет, есть меню, при наведении на первый уровень, добавляется класс и показывается 2й уровень, когда убираю мышь класс пропадает и второй уровень закрывается, все верно.

Нужно, когда юзер убрал мышь, подождать примерно 1 секунду и если юзер не вернул курсор тогда закрыть второй уровень. Это что-то типа защиты, если резко дернуть мышкой, чтобы второй уровень сразу не закрывался. Вот мой код:

let level1 = document.querySelector('.is-nested');

level1.addEventListener('mouseover', event => {
	level1.classList.add('is-active');
});

level1.addEventListener('mouseout', event => {
	level1.classList.remove('is-active')
});

Вторая часть с mouseout, должна сработать не сразу, а через 1 секунду и если юзер вернул курсор обратно на mouseover, то отмена второй части, ее не нужно выполнять.

Ааа еще заметил, что у меня есть много пунктов меню содержащих второй уровень, а работает только с первым(( Берет .is-nested только у первого пункта меню, можно ли чтобы с другими тоже работало?((


//UPD
Немного получилось, вот какой сейчас код, все вторые уровни работают, все норм, осталось как-то решить вопрос с одной секундой задержки перед закрытием, это не знаю как делать((

// Получаем все элементы с классом .item
	const level1 = document.querySelectorAll('.is-nested');

	// Добавляем обработчик события для каждого элемента
	level1.forEach(item => {
		// Добавляем класс .is-active при наведении мыши
		item.addEventListener('mouseover', () => {
			item.classList.add('is-active');
		});

		// Удаляем класс .acis-active при уходе мыши
		item.addEventListener('mouseout', () => {
			item.classList.remove('is-active');
		});
	});

Даже наверное неверно написал, вот такая логика нужна:
1. Юзер наводит мышь на первый пункт меню содержащий второй уровень, добавляется класс is-active второй уровень отображается.
2. Юзер наводит мышь на второй пункт меню содержащий второй уровень, у первого пункта меню класс .is-active исчезает сразу, у второго пункта меню он появляется сразу и видим на экране второй уровень второго пункта меню.
3. Юзер уводит мышь с меню, через 1 секунду класс .is-active пропадает и все вторые уровни если были открыты закрываются.
4. Юзер уводишь мышь с меню, менее чем на 1 секунду и возвращает курсор обратно, класс .is-active не пропадает, меню не закрывается.