當用戶點擊 div 時關閉菜單

Question

我如何檢查用戶是否正在單擊名為 right-side-container 的 div，以及他們是否刪除了打開菜單的 class。

    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");

Answer 1

我猜您想在單擊時打開/關閉菜單。 所以你可以在 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>

在這里，您附加變量“show”以顯示或不顯示您想要的元素。 然后將“單擊”function 附加到要單擊以顯示/隱藏元素的元素。