Как совместить e.target с +.lvl2?

Question

[historydev]

Доброе утро. Мне нужно реализовать открытие меню при клике, скажите пожалуйста как мне это сделать правильно или оставлять мой вариант?

Спасибо.

let state = false,
	state2 = false,
	state3 = false

$(document).on('click', '.list', (e) => {
	state = !state

	if(state) $(`${e.target} +.lvl2`).css('display','block')

})

Comments

[Вадим]

покажите структуру HTML.
Судя по js, у вас ряд элементов с классом .list, за каждым из которых в разметке следует элемент с классом .lvl2, верно?

[historydev]

Вадим, да-да, верно, было при наведени в css вот так, но это дико не удобно:

.list:hover +.lvl2 {
    display: block;
}

.lvl2:hover {
    display: block;
}

.lvl1:hover +.home {
    display: block;
}
.home:hover {
    display: block;
}

[Вадим]

Владимир, А переменные state Вам зачем?

[historydev]

Вадим, чтобы при втором клике на открытый пункт он закрывался

Answer 1

[Вадим]

Исходя из JS кода, а так же Ваших пояснений в комментариях к вопросу, предлагаю переоформить Ваше решение следующим образом:

• Скрываем css`ом все .lvl2
  
• Было бы так же хорошо поместить все .list в отдельный контейнер, чтобы не слушать весь документ. Если это возможно, конечно.
  
• Переписываем js слудующим образом:
  

$('.list-container').on('click', '.list', listClickHandler);

function listClickHandler(){
  $(this).next('.lvl2').slideToggle(); // this - элемент, на котором произошёл клик. Соответственно $(this) - его jQuery версия
}

.next()
.slideToggle()

Comments

[historydev]

Извините за поздний ответ, спасибо большое!

Answer 2

[Александр]

Если меню сделано на focusable элементах, можно попробовать комбинацию :focus и :focus-within