时间戳

首页 > 解决方案 > Javascript, CSS, HTML - 点击屏幕使下拉菜单消失

javascript - Javascript, CSS, HTML - 点击屏幕使下拉菜单消失

问题描述

在我的项目中，我有一个按钮，用户可以单击该按钮并出现一个下拉菜单。现在我想实现，当我单击窗口内的任意位置时，下拉框就会消失。有人知道如何实现这个功能吗？谢谢你。

这是我的代码： HTML：

<img onclick="hamburgerIconFunction()" width="43px" class="hamburger-icon" src="{% static 'hamburgericon.png' %}" alt="Image of a hamburger icon">
<div class="hamburgerBox-container">
       <img class="hamburgerBox" src="{% static 'hamburgerBox.png' %}" alt="Image of a navbar popup box">
</div>

CSS：

.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;
    }
}

JS：

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

标签： javascripthtmlcss

解决方案

我认为模糊事件可以为您提供您正在寻找的行为。当您单击该图标时，它将具有焦点。当您单击其他任何位置时，它将失去焦点，启动blur事件。对于您当前的做事方式，这样的事情可能会起作用：

const hamburger = document.querySelector('.hamburger-icon');
hamburger.addEventListener('blur', () => {
  document.querySelector('.hamburgerBox').style.display = none;
});

或者，您可以将另一个单击事件绑定到文档正文或文档本身，以执行相同的操作。

话虽如此，您真正想做的是尝试保持关注点分离，在这种情况下，这意味着将您的 CSS 与您的 JS 隔离，并将您的 JS 与您的 HTML 隔离。不要在 HTML 中使用事件属性，而是在 JS 文件中为元素添加事件侦听器。不要更改 JS 中的 CSS 属性，而是更改应用于元素的类。在这种情况下，这看起来就像在事件的下拉菜单中添加和删除一个名为“.is-visible”的类或类似的东西。

查看此线程，其中讨论了单击屏幕时删除类：单击屏幕上的任意位置以删除类

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

推荐阅读