Dropdown javascript?

Question

[vasilijedragicevic]

Hе могу сделать код для закрытия dropdown при клике на сам button

При клике на button dropdown выпадает, при клике на window исчезает, но вот проблема не могу написать код чтоб при клике на button с открытым dropdown он исчезал

menu_dd - class of button
dropped_content - class of content with dipslay: none
show {
dipslay: block
}

document.querySelector('.menu_dd').addEventListener('click', function(e){
	let dp = document.querySelector('.dropped_content') 
		dp.classList.add('show')
		e.stopPropagation()
})

window.onclick = function(e) {
  let find = document.querySelector('.dropped_content')
  find.classList.remove('show')
}

Comments

[dmitry-toster]

загрузите в песочницу

Answer 1

[kocherman]

Вам надо заменить метод
dp.classList.add('show')
на
dp.classList.toggle('show')

Answer 2

[profesor08]

Добавь блоку атрибут tabindex="-1" и отслеживай события focus, blur на нем.

Answer 3

[nomidson]

Тут надо использовать if
и надо использовать одну переменную с селектором зачем 2 переменных с .dropped_content если надо создать одну глобальную!

let dp = document.querySelector('.dropped_content') 
document.querySelector('.menu_dd').addEventListener('click', function(e){
    dp.classList.add('show')
    e.stopPropagation()
})

window.onclick = function(e) {
  if(dp.classList.contains(show)){
      dp.classList.remove('show')
 }
}

КАК-ТО ТАК