How to make a click popup window using javascript?

Question

I want to make a button that can pop up a window when the button is clicked~

But when the window pops up, click the green menu, the menu will not disappear, only click again or any blank space around the menu! The

menu will be closed again, but I I wrote a judgment why this function cannot be realized? I hope to get your help, thank you.

const el = document.querySelector('.click')
const menu = document.querySelector('.menu');

el.onclick = function() {
  menu.classList.toggle("showmenu");
}

window.onclick = function(e) {
  if (!e.classList.contains('menu') || !e.classList.contains('menu_item')) {
    menu.removeClass('showmenu');
  }
}

.click {
  background-color: yellow;
  padding: 20px;
}

.menu {
  display: inline-block;
  background-color: green;
  list-style-type: none;
  display: none;
}

.menu a {
  text-decoration: none;
  color: #fff;
  padding: 30px;
  font-size: 20px;
}

.showmenu {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="click">click</button>
<ul class="menu">
  <li class="menu_item"><a href="#">item1</a></li>
  <li class="menu_item"><a href="#">item2</a></li>
  <li class="menu_item"><a href="#">item3</a></li>
</ul>

Answer 1

The jQuery method .removeClass() was used on a plain JavaScript object (ie menu). In the example .classList.remove() was used instead. If you want to use .removeClass() instead, you must convert menu into a jQuery object const menu = $('.menu') then menu.removeClass('showmenu') will work.

Also, I changed the CSS a little to stop the button from jumping and to tame those links -- they bled from the menu's percieved borders. The CSS of course is not a requirement of solution.

Solution

Make all of the event handlers into a single event handler and delegate behavior with control flow statements, Event.target property, and .matches() method. The following uses the programming paradigm called event delegation.

const btn = document.querySelector('.click')

document.body.onclick = popUp;

function popUp(e) {
  const clicked = e.target;
  const menu = document.querySelector('.menu');

  if (clicked.matches('.click')) {
    menu.classList.toggle("showmenu");
  } else if (!clicked.matches('.click') && !clicked.matches('.menu')) {
    menu.classList.remove('showmenu');
  } else return false;
}

body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.click {
  background-color: yellow;
  padding: 20px;
}

.menu {
  display: none;
  background-color: green;
  list-style-type: none;
}

.menu a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 5px;
  font-size: 20px;
}

.showmenu {
  display: inline-block;
}

<button type="button" class="click">click</button>
<ul class="menu">
  <li class="menu_item"><a href="/#">item1</a></li>
  <li class="menu_item"><a href="/#">item2</a></li>
  <li class="menu_item"><a href="/#">item3</a></li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>