JavaScript 如何通过点击外部来关闭下拉菜单

问题描述

代码示例： https://codepen.io/vvaciej/pen/abPdEBN

不知道如何实现一个函数，当菜单处于激活状态时通过右键点击外部关闭菜单。

const menuButton = document.querySelector('.fa-bars');
const barsArea = document.querySelector('.bars-area');
const bodyArea = document.querySelector('body');

menuButton.addEventListener('click', function () {
  if (!barsArea.classList.contains('active')) {
        barsArea.classList.add('active');
    } else if (barsArea.classList.contains('active')) {
        barsArea.classList.remove('active');
    }
});

我试过这个：

bodyArea.addEventListener('click', function() {
 if (barsArea.classList.contains('active') {
    barsArea.classList.remove('active');
 {
});

但它没有起作用。所以我问你们，也许有人知道如何做对吗？？

解决方案

你需要将bodyArea.addEventListener改为document.addEventListener。从barsArea.classList.contains('active')开始是一个好的开始，而且barsArea没有一个目标!barsArea.contains(e.target)，目标也不必是menuButton。这样你就可以像你一样删除活动的一个barsArea.classList.remove('active');：

document.addEventListener('click', function (e) {
  if (barsArea.classList.contains('active') &&
      !barsArea.contains(e.target) &&
      e.target !== menuButton) {
    barsArea.classList.remove('active');
  }
});