How to make a click popup window using javascript?-CodePudding

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" >click</button>
<ul >
  <li ><a href="#">item1</a></li>
  <li ><a href="#">item2</a></li>
  <li ><a href="#">item3</a></li>
</ul>

CodePudding user response：

Few problems:

Your global click event listener is trying to get the classList property of the event, which doesn't exist. You should instead be getting the target of the event, which is retrieved through the target property.
There is no removeClass method. Use classList.remove instead.
Call Event.stopPropagation in the click event listener binded to .click, so the global click event listener will not handle the event (otherwise it will close the menu immediately after it was opened).

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

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

window.onclick = function(e) {
  if (!menu.contains(e.target)) {
    menu.classList.remove('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" >click</button>
<ul >
  <li ><a href="#">item1</a></li>
  <li ><a href="#">item2</a></li>
  <li ><a href="#">item3</a></li>
</ul>

CodePudding user response：

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" >click</button>
<ul >
  <li ><a href="/#">item1</a></li>
  <li ><a href="/#">item2</a></li>
  <li ><a href="/#">item3</a></li>
</ul>

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