Как сделать выпадающее меню при наведении, а закрытие только по клику?

Question

[Igor Feren]

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

С помощью js определил только первый класс .sub-menu, не знаю как повесить закрытие на кнопку.

JS:

const listItems = document.querySelectorAll('.sub-menu'); //берем все .sub-menu
listItems.forEach(item=>{ //итерируем
       if(item.querySelectorAll('.sub-menu').length) { //если в sub-menu нет других sub-menu
           item.classList.add("visible") //присваиваем класс
    }
})

Comments

[Владимир Брумер]

При ховере добавляете класс элементу, согласно которому показываете через CSS. При клике на вашу кнопку берете основной идентификатор меню и в нем ищете елемент с классом, который добавили... Собственно и убираете все найденные классы visible

Answer 1

[Антон Романков]

onMouseEnter => открыть меню
onClick на документе, исключая сам дропдаун => закрыть меню

С onMouseEnter, думаю, все понятно.

const menuItems = document.querySelectorAll('.menu-item')
document.addEventListener('click', (e) => {
  event.stopPropagation() // это надо, чтобы прекратить распространение события
  if (!menuItems.includes(e.target)) {
    // close dropdown
  }
})