Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.05.2024, 15:49
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 78

Как убрать класс у элемента через 1 секунду
Всем привет, есть меню, при наведении на первый уровень, добавляется класс и показывается 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 не пропадает, меню не закрывается.

Последний раз редактировалось Leon2110, 21.05.2024 в 16:13.
Ответить с цитированием
  #2 (permalink)  
Старый 21.05.2024, 19:42
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,510

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

// Добавляем обработчик события для каждого элемента
level1.forEach(item => {
  let closeTimer;

  // Добавляем класс .is-active при наведении мыши
  item.addEventListener('mouseenter', () => {
    clearTimeout(closeTimer);
    
    item.classList.add('is-active');
  });

  // Удаляем класс .acis-active при уходе мыши
  item.addEventListener('mouseleave', () => {
    closeTimer = setTimeout(() => {
      item.classList.remove('is-active');
    }, 1 * 1000);
  });
});
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 21.05.2024, 20:32
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 78

Спасибо, все шикарно, только не учитывается этот пункт:

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

Получается я навожу мышь быстро на пункт 1, 2, 3 и они все поверх друг друга появляются и так же через секунду по одному исчезают. А нужно чтобы когда навожу на другой пункт, первый закрывался сразу и второй открывался сразу, без задержек.
Ответить с цитированием
  #4 (permalink)  
Старый 21.05.2024, 21:14
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,510

Как-то так, уже мутновато на глазок делать, то тестить лень.
// Получаем все элементы с классом .item
const level1 = document.querySelectorAll('.is-nested');
let lastItem;

// Добавляем обработчик события для каждого элемента
level1.forEach(item => {
  let closeTimer;

  // Добавляем класс .is-active при наведении мыши
  item.addEventListener('mouseenter', () => {
    clearTimeout(closeTimer);

    if (lastItem && lastItem !== item) {
      lastItem.classList.remove('is-active');
    } else {
      item.classList.add('is-active');      
    }

    lastItem = item;
  });

  // Удаляем класс .acis-active при уходе мыши
  item.addEventListener('mouseleave', () => {
    closeTimer = setTimeout(() => {
      item.classList.remove('is-active');
    }, 1 * 1000);
  });
});
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запомнить класс у дом элемента Tipylja Общие вопросы Javascript 1 27.03.2018 12:14
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
как узнать размер в пикселях элемента созданного элемента span Faab Общие вопросы Javascript 2 09.11.2013 16:46
как обратиться к items элемента из другого элемента и изменить его? Krepkii ExtJS 2 12.02.2013 14:53
Перенос Name элемента через Jquery titanrat Общие вопросы Javascript 2 05.12.2012 14:20