Simply close by clicking outside using basic vanilla JavaScript

Question

Simply close by clicking outside using basic vanilla JavaScript

I have successfully implemented a menu that closes (removes the added class) when clicking outside the menu button area.

Although it is working fine, I am unsure if my code is correct. My understanding is that the click outside functionality should only be triggered when the .newClass is added to the div. How can I make this adjustment? I am relatively new to JavaScript.

var b = document.getElementById("menu");
document.addEventListener("mouseup", function(event) {
  var clickOnMenu = b.contains(event.target);
  if (clickOnMenu) {
    b.classList.toggle("newClass");
  } else {
    b.classList.remove("newClass");
  }
});

div.box {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  transition: .2s ease-in-out;
  cursor: pointer;
}

div.box:hover {
  background: rgba(0, 0, 0, 0.7);
}

div.newClass {
  padding-bottom: 100px;
}

<div id="menu" class="box">Menu</div>

javascript html css

Answer 1

Answer №1

Hopefully this information is beneficial to you

var element = document.getElementById("menu");
document.addEventListener("mouseup", function(event) {
  var targetId = event.target.id;
  if(targetId == "menu" ) {
    element.classList.add("newClass");
  } else {
    element.classList.remove("newClass");
  }
});

div.box {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  transition: .2s ease-in-out;
  cursor: pointer;
}

div.box:hover {
  background: rgba(0, 0, 0, 0.7);
}

div.newClass {
  padding-bottom: 100px;
}

<div id="menu" class="box">Menu</div>

Answer 2

Hopefully this information is beneficial to you

var element = document.getElementById("menu");
document.addEventListener("mouseup", function(event) {
  var targetId = event.target.id;
  if(targetId == "menu" ) {
    element.classList.add("newClass");
  } else {
    element.classList.remove("newClass");
  }
});

div.box {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  transition: .2s ease-in-out;
  cursor: pointer;
}

div.box:hover {
  background: rgba(0, 0, 0, 0.7);
}

div.newClass {
  padding-bottom: 100px;
}

<div id="menu" class="box">Menu</div>

Simply close by clicking outside using basic vanilla JavaScript

Answer №1

Similar questions

Fill every empty element with elements from another array

Unable to retrieve this object because of a intricate JavaScript function in Vue.js

Instructions for ordering this jQuery script that executes ajax and should return a 'true' value

The communication between the Next.js and Node.js servers is being obstructed as the request body fails

Creating dynamic button names and detecting the pressed button in PHP

One of the functionalities is not functioning properly: either the validation or the AJAX

Guide to applying Bootstrap styles to a specific section of an HTML document

Ways to assign a CSS class specifically for images

Disordered block elements

``Sorry, the link redirection feature is currently experiencing technical

Tips for transforming intricate JavaScript arrays into a unified array and iterating through to create a table

React - onchange event for input checkboxes does not trigger on the initial click

Enhance User Experience with ngDialog Modal's Multi-pane Feature for Angular

Is it possible for an HTML number input's arrows to change in increments that are different from its designated step attribute?

Enclose a pair of divs within a fresh div wrapper for better organization

Steps for making a button with both an image and text:

Enhancing Communication Between JavaScript and PHP

Having trouble integrating MaterialUI Datepicker, Dayjs, useFormik, and Yup

Looking to implement pagination in Vue.js - what steps should I take?

Exploring the Integration of Callbacks and Promises in Express.js