Клик вне определенной области, кроме одного элемента содержащего псевдо-элемент before — почему так не работает?

Question

[lagudal]

Вопрос простой - в примере по клику на toggle Menu submenu открывается и закрывается попеременно, по клику по пустому (кроме Menu) сабменю закрывается.
Но если кликнуть по гамбургеру - то закрыться сабменю закроется, но при повторном клике на гамбургер не открывается.
Я так понимаю, это потому что js не воспринимает before как часть класса toggle, и поэтому клик по нему выглядит как клик вне сабменю.
Можно было бы завернуть в дополнительный див, и тогда все сработает, но в живом проекте именно такое dom дерево.
Потому как не меняя структуру html решить вопрос?

Answer 1

[Алексей Уколов]

js не воспринимает before как часть класса toggle

Не совсем так - как часть toggle псевдоэлемент как раз воспринимается, но в функции скрытия вы проверяете на то, что элемент является ребёнком toggle и вот для псведоэлементов это не так. Собственно, у js нет доступа к псевдоэлементам и их он воспринимает как сам основной элемент.
Для решения проблемы достаточно изменить условие:

if (!$(e.target).parents().hasClass("toggle") && !$(e.target).hasClass("toggle") && $(e.target).parents(".nav-items").length === 0)

Comments

[Alexandroppolus]

if (!e.target.closest(".toggle, .nav-items")) {