javascript - 如何在外部单击时关闭站点导航栏？

Question

我创建了站点导航栏，但不知道如何在用户单击外部时关闭它。我试过“关注”汉堡包按钮，但这不是很好的方法。实际上，我在 javascript 中使用了“toggleClass”，并且我的导航栏在单击期间打开/关闭。我不知道该怎么做。

HTML

<button id="hamburger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </button>

        <ul class="menu">
            <li><a href="#" >Main </a></li>
            <li><a href="#"> Blog </a></li>
            <li><a href="#"> Contact </a></li>
            <li><a href="#"> More </a></li>
        </ul>

JAVASCRIPT

    hamburger.addEventListener('click',function(){
       menu.classList.toggle('open');
      });

CSS

      .menu {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: fixed;
        width: 40%;
        height: 100%;
        background-color: rgba(26, 23, 36, 0.96);
        border-right: 1px solid #8383a2;
        transform: translateX(-100%);
        transition: 0.3s transform linear;
        padding-left: 0;
    }
        .open {
        transform: translateX(0%);
    }

Answer 1

1. 一种解决方案是在菜单下添加叠加层并关闭
   此叠加层的单击事件上的菜单。
   
2. 如果菜单是，另一个正在检查整个文档的点击事件 打开并点击了它之外的东西。
   
3. 使用 focusout 或 blur 事件是另一种解决方案，但它需要 请记住，此类 HTML 需要 tabindex 属性 元素为 div 或 ul。

您可以在下面找到第二种方法的工作示例。

hamburger = document.getElementById('hamburger');
menu = document.getElementById('menu');
hamburger.addEventListener('click',function(event){
       menu.classList.toggle('open');
      });
      
document.addEventListener('click', function(event) {
  if(menu.classList.contains('open') && !event.target.isEqualNode(hamburger) && !event.target.isEqualNode(menu) && !menu.contains(event.target)) {
      menu.classList.remove('open');
  }
});

   .menu {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: fixed;
        width: 40%;
        height: 100%;
        background-color: rgba(26, 23, 36, 0.96);
        border-right: 1px solid #8383a2;
        transform: translateX(-100%);
        transition: 0.3s transform linear;
        padding-left: 0;
    }
        .open {
        transform: translateX(0%);
    }

<button id="hamburger">
            I am hamburger
        </button>

        <ul class="menu" id = "menu" >
            <li><a href="#" >Main </a></li>
            <li><a href="#"> Blog </a></li>
            <li><a href="#"> Contact </a></li>
            <li><a href="#"> More </a></li>
        </ul>