单击屏幕上的任意位置时如何隐藏下拉菜单？ (javascript)

Question

I want to make it so when you click anywhere on the page it hides the dropdown menu and I want an animation when the dropdown opens and closes.我想这样做，所以当您单击页面上的任何位置时，它会隐藏下拉菜单，并且在下拉菜单打开和关闭时我想要一个动画。 I've tried multiple ways but none of them work.我尝试了多种方法，但都没有奏效。 I want to make it so when you click anywhere on the page it hides the dropdown menu and I want an animation when the dropdown opens and closes.我想这样做，所以当您单击页面上的任何位置时，它会隐藏下拉菜单，并且在下拉菜单打开和关闭时我想要一个动画。 I've tried multiple ways but none of them work.我尝试了多种方法，但都没有奏效。

Here is the whole code:这是整个代码：

Javascript: Javascript：

function Dropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

event.stopPropagation = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
}

Html: html:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="./assets/css/NavBar.css">
        <link rel="stylesheet" href="./assets/css/Dropdown.css">

        <link rel="shortcut icon" href="./images/favicon.ico" />

        <script src="https://kit.fontawesome.com/7615d16710.js" crossorigin="anonymous"></script>

        <title>MusmanDev</title>
    </head>

    <body>
        <header>
            <a class="logo" href="#"><img class="logo" src="./images/logo.png" alt="MusmanDev"></a>
            <nav>
                <ul class="nav__links">
                    <li><a href="#">Blogs</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a>|</a></li>
                    <li>
                        <div class="dropdown">
                            <script src="./assets/js/Dropdown.js"></script>
                            <i class="fa-solid fa-bolt fa-lg" class="dropbtn" onclick="Dropdown()"></i>
                            <div id="myDropdown" class="dropdown-content">
                              <a><i class="fa-solid fa-moon"></i>  Dark Mode</a>
                              <a><i class="fa-solid fa-sun"></i>  Light Mode</a>
                              <a><i class="fa-solid fa-display"></i>  System</a>
                            </div>
                        </div>
                    </li>
                    <li><a href="#"><i class="fa-brands fa-github-square fa-xl"></i>‎</a></li>
                </ul>
            </nav>
        </header>
    </body>
    
</html>

CSS: CSS：

.dropbtn {
    background-color: #24252A;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
.dropdown-content a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

Answer 1

So first, making the code a code snippet in your browser would be more helpful.因此，首先，将代码作为浏览器中的代码片段会更有帮助。 For the question: you can easily make keyframe animations in css for animating a menu.对于这个问题：您可以轻松地在 css 中制作关键帧动画来为菜单设置动画。 You just change the animation class of the dropdown tag.您只需更改下拉标签的动画类。

element.style.animation = "3s *animation name*";

To make the dropdown menu disappear, i would just use the addEventListener() Method.要使下拉菜单消失，我只需使用 addEventListener() 方法。

Answer 2

This might not be what you are after but assuming that at first the user is focused on the drop down menu and then when the user clicks away you want to hide the drop down menu this might work这可能不是您所追求的，但假设首先用户专注于下拉菜单，然后当用户点击离开时您想要隐藏下拉菜单，这可能会起作用

var menu = document.getElementById("myDropDown");
menu.addEventListener("blur", function(event) {
   menu.style = "visibility: hidden";
   //or you can use menu.style = "display: none"
});

Answer 3

You are probably looking for a outsideClick listener.您可能正在寻找outsideClick侦听器。 I am referring to this question How do I detect a click outside an element?我指的是这个问题如何检测元素外的点击？

You can easily add that, so whenever clicked outside of the dropdown, you would add your style or hide.您可以轻松添加它，因此每当在下拉列表之外单击时，您都可以添加样式或隐藏。

I can provide with an example here if needed.如果需要，我可以在这里提供一个示例。

单击屏幕上的任意位置时如何隐藏下拉菜单？ (javascript)

问题描述

3 个解决方案

解决方案1
0 2022-07-21 19:47:21

解决方案2
-1 2022-07-21 19:23:21

解决方案3
-1 2022-07-21 19:51:30

单击屏幕上的任意位置时如何隐藏下拉菜单？ (javascript)

问题描述

3 个解决方案

解决方案1 0 2022-07-21 19:47:21

解决方案2 -1 2022-07-21 19:23:21

解决方案3 -1 2022-07-21 19:51:30

解决方案1
0 2022-07-21 19:47:21

解决方案2
-1 2022-07-21 19:23:21

解决方案3
-1 2022-07-21 19:51:30