0

I am having trouble as to how to make the contents of the dropdown menu hide when clicking off of the dropdown menu on the page. I have provided the code below and need some assistance. Please help in explaining the correct javascript code.

<!-- html code -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
    <script src="script.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
  </head>
  
  <body>
   <div class = "header">
    <div class = "logo">Logo</div>
      <div class = "dropdown">
        <div class ="button">
          <a href = "#" id ="btn" onclick="myFunction()" class="dropbtn"><i class="fa-solid fa-bars" id ="button"></i></a>
        </div>
        <div class = "dropdown-content" id = "myDropdown">
            <nav>
              <ul class ="dropdownMenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Store</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
        </div>
      </div>
  </div>
  </body>
</html>

This is the CSS Code for the webpage.

/* css code */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Open+Sans:wght@300;400&display=swap');



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.header {
    height: 80px;
    background-color: lightblue;
    box-shadow: 0px 3px #888888;
    display: flex;
    justify-content: space-between;
    line-height: 55px;
    z-index: 99;
}

ul {
    list-style-type: none;
    
}

ul li {
    display: inline-block;
    padding: 10px 10px;
    
}

ul li a {
    text-decoration: none;
    color: black;
    font-family: 'Montserrat', sans-serif;
}

.logo {
    padding: 10px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
}

#button {
    display: none;
}

@media only screen and (max-width: 550px) {
    body {
      padding: 0;
      margin: 0;
      background-color: lightblue;
    }

  
    .header {
        display: flex;
        flex-direction: column;
        /*z-index: 99;*/
        
    }

    ul li {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        
    }
 
    ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        height: 5em;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid black;
        color: black;
        font-size: 20px;
        font-weight: 800;
        justify-content: center;
        
    }

    a:hover {
        background-color: lightblue;
    }

    #button {
        display: inline;
        top: 0;
        right: 0;
        padding: 30px;
        /*z-index: 98;*/
        position: absolute;
        color: black;

    }
    .dropdown-content {
        display: none;
        background-color: white;
        /*z-index: 97;*/
    }

    .show {display:block;}



}

This is the javascript code for the webpage.

// JS Code
// Not sure how to close dropdown menu when page is clicked off of dropdown menu on page
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
  }
Brian
  • 87
  • 1
  • 5
  • (note on the question I've marked this as a duplicate of, the top answer, with most votes, is a bad solution as explained in the comments to it. You're much better off going with one of the others. Don't worry that many of the solutions use jQuery, the same concepts apply to vanilla JS and some answers show code for how to do this too) – Robin Zigmond May 12 '22 at 19:52

1 Answers1

-1

You can add a click handler on the whole page and toggle the dropdown with it. Though would need some checks and bubbling prevention on the dropdown itself, but this way it should work:

document.documentElement.addEventListener(
    'click', 
    () => document.getElementById("myDropdown").classList.toggle("hide"), 
    false
);
Onki Hara
  • 270
  • 1
  • 9
  • 1
    Hello, downvoter here :-) For one thing, this question is well-answered elsewhere in SO so shouldn't be answered anew. However I personally wouldn't usually downvote for that alone, what drove me to downvote was that this doesn't even give a full answer, as it doesn't distinguish between clicking on and outside the dropdown, which is the key thing. I do now see you acknowledged this in your comment, but I don't think that's good enough when a) it's the key point of this question and b) the right fix for that involves changing your code so that the event handler checks the event target. – Robin Zigmond May 12 '22 at 21:47
  • Thank you for taking the time to answer @RobinZigmond! I concede the points and learned something. – Onki Hara May 13 '22 at 05:51