Close menu when user clicks on div

Question

How can I check if a user is clicking on a div called right-side-container and if they are remove the class of menu-opened.

    toggleMenu() {
      this.open = !this.open;
      document.getElementsByTagName("html")[0].classList.toggle("menu-opened");
      if (this.open) {
        document.addEventListener("click", this.menuClickListener);
      } else {
        document.removeEventListener("click", this.menuClickListener);
      }
    },
    menuClickListener($event) {
      console.log($event);
    },
  },
}; 


// This is what I want to remove when the user is clicking the right-side-container
document.getElementsByTagName("html")[0].classList.remove("menu-opened");

Does [this](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) answer your question? — Huy Phạm, Mar 17 '22 at 10:46
You should probably ditch Vanilla JS listeners and use Vue here, with `@click` and a state. — kissu, Mar 17 '22 at 10:50

score 0 · Answer 1 · edited Mar 17 '22 at 10:58

I guess you want to open/close menu on click. So you can do this in Vue:

export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      // my different actions...
      this.show = !this.show
    }
  }
}

<div v-if="show">
  My menu
</div>
<div @click="toggleMenu">
  Your button/container to show/hide menu
</div>

Here you attach your variable "show" to display or not the element you want. And you attach your "click" function to the element you want to click to show/hide your element.

Close menu when user clicks on div

1 Answers1