Javascript、CSS、HTML-单击屏幕使下拉菜单消失

在我的项目中，我有一个按钮，用户可以单击该按钮并显示一个下拉菜单。现在我想实现，当我点击窗口内的任何地方时，下拉框消失。 有人知道如何实现这个功能吗？多谢各位

这是我的密码： HTML:

JS:

我想这会给你你想要的行为。单击图标时，它将具有焦点。当您单击其他任何位置时，它将失去焦点，从而启动模糊事件。就你目前的做事方式而言，类似这样的方式可能会奏效：

const hamburger=document.querySelector'.hamburger icon'； 汉堡包.添加列表'blur'，=>{ document.querySelector'.hamburgerBox'.style.display=none； }; 或者，您可以将另一个单击事件绑定到文档体或文档本身，以执行相同的操作

这就是说，您真正想要做的是保持关注点的分离，在本例中，这意味着将CSS与JS分开，将JS与HTML分开。不要在HTML中使用事件属性，而是在JS文件中为元素添加事件侦听器。更改应用于元素的类，而不是更改JS中的CSS属性。在本例中，这看起来像是在事件的下拉菜单中添加和删除名为.is的类或类似的类

查看此线程，其中讨论单击屏幕时删除类：

以下是关于汉堡按钮菜单的其他有用资源：

---

使用纯Javascript实现结果的一种方法是，当用户单击document对象时隐藏菜单，并停止单击hamburger图标元素时事件冒泡，如下所示：

// Intercept click on the hamburger icon, stop the event bubbling and show the hamburger box.
document.getElementById( 'hamburger-icon' ).addEventListener( 'click', function( event ) {
    event.stopPropagation();
    document.getElementById( 'hamburgerBox' ).style.display = 'inline';
});

// Intercept the click on the document and hide the hamburger box. Having stopped the bubbling, the click on the hamburger icon will never reach this listener.
document.addEventListener( 'click', function() {
    document.getElementById('hamburgerBox').style.display = 'none';
});

---

请注意，我已将ID添加到元素中，以使javascript能够轻松访问它们，因此在代码中，您也必须放置ID，以便代码正常工作。

FYI:img元素的width属性是无单位的，因为它始终以像素为单位。看到了。谢谢你@Stephenmirving没问题的朋友，很高兴帮助哦@eweee-我还有一个建议给你。在img元素的alt属性中，不要像…的图像那样表达它。。。。alt标记主要用于辅助功能。尤其是盲人使用的屏幕阅读器，偶尔用于意外损坏的图像。在屏幕阅读器的情况下，他们已经知道这是一个图像，并已通知用户。写下的图像会让屏幕阅读器两次告诉他们这是一个图像。在破碎图像的情况下，我们有视力的人可以看到，这本来就是一个图像。只需写下汉堡菜单图标即可。你好感谢您的回复，但是，您阻止事件冒泡是什么意思？简单来说，只是为了介绍一下，如果事件发生在元素“el”上，而元素“el”又包含在另一个元素中，那么该事件将通过“el”的所有父级冒泡，直到它到达document对象。为了更好更深入的解释，我建议你读一读：啊，好的。非常感谢。

.hamburger-icon {
    position: absolute;
    display: none;
    right: 20px;
    bottom:16px;
}

.hamburgerBox {
    display: none;
    position: absolute;
    right: 26px;
    top: 58px;
}


@media screen and (max-width: 991px) {
    .nav-btn {
        display: none;
    }

    .hamburger-icon {
        display: inline;
    }
}

@media screen and (min-width: 992px) {
    .hamburgerBox {
        width: 0px;
        height: 0px;
    }
}

  function hamburgerIconFunction() {
    hamburgerBox = document.getElementsByClassName("hamburgerBox") [0];
    hamburgerBox.style.display = 'inline';
  }

// Intercept click on the hamburger icon, stop the event bubbling and show the hamburger box.
document.getElementById( 'hamburger-icon' ).addEventListener( 'click', function( event ) {
    event.stopPropagation();
    document.getElementById( 'hamburgerBox' ).style.display = 'inline';
});

// Intercept the click on the document and hide the hamburger box. Having stopped the bubbling, the click on the hamburger icon will never reach this listener.
document.addEventListener( 'click', function() {
    document.getElementById('hamburgerBox').style.display = 'none';
});