Opening and Closing dropdown menu when clicking outside

Question

For my website I want to make my features button open a list of content and closing it when clicking outside of the button. However if I try to apply my code (which I thought to be correct) my dropdown list disappears for any reason. Does anyone know how to stop my dropdown list from disappearing? My code is the following:

// Rotation arrow icon on click
const acc = document.getElementsByClassName("switch");
let i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    this.classList.toggle("iconUp");
  });
}

// Opening dropdown menu on click 
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(Event) {
  if (!Event.target.matches('.dropbtn')) {

    const dropdowns = document.getElementsByClassName("dropdown-content");
    let i;
    for (i = 0; i < dropdowns.length; i++) {
      let openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* General styling attributes */ 
* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    text-decoration:none;
    list-style:none;
    box-sizing: border-box;
}

:root {
    --color-primary: #4EC843;
    --color-secondary: #387CFF;
    --color-dashboard: purple;
    --color-hover: #20d62c;
    --color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);

    --container-width-lg: 80%;
    --container-width-md: 90%;
    --container-width-sm: 94%;
    --dashboard-width: clamp(210px, 22vw, 325px);

    --transition: all 400ms ease;
    --tranition-button: all 800ms ease;
}


body * {
    font-family: "Open Sans", sans-serif;
    line-height: 1.5;
 
}

.container {
    width: var(--container-width-lg);
    margin: 0 auto;
}


h1, h2, h3, h4 h5{
    line-height:inherit;
}

h1 {
    font-size:3rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size:2.063rem;
}

h4 {
    font-size:1.125rem;
}

h5 {
    font-size:0.938rem;
}

hr {
    display: flex;
    opacity: 15%;
    width: 3.125rem;
    text-align: center;
}

img {
    width:100%;
    height:auto;
}

/* Large screen size website design */

/* Navigation Menu styling Index.html */

nav {
    width:100%;
    height:4.5rem;
    position:fixed;
    top:0;
    z-index:11; 
    background: white;
    opacity: 98.2%;
}

.nav__container {
    height:4.5rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.nav__container li, a {
    font-size:0.95rem;
    font-weight:600;
    color:black;
}

.nav__menu button {
    background:none;
}

.Hamburger {
    display:none;
}

.nav__menu {
    display:flex;
    align-items: center;
    gap:3.5rem;
}

.nav__menu a:hover {
    transition: var(--transition);
    color:grey;
}

.Login_nav {
    display: block;
}

.Login:hover {
    transition: var(--transition);
    color:grey;
}
    
.switchIconRotate {
    transform-origin: center;
    transition: 0.2s;
}

.fa-angle-down {
    color:#6161F2
}

.iconUp .fa-solid {
    transform-origin: center;
    transform: rotate(180deg);
}
  
#Demobutton {
    cursor:pointer;
    background-color: var(--color-primary);
    border-radius:2.125rem;
    border:none;
    color: white;
    width:8.125rem;
    height:2.188rem;
    font-weight:600;
    font-size:0.938rem;
}

#Demobutton:hover {
    background-color: #20D62C;
    transition:var(--tranition-button);
}


#startingbackground {
    content:'';
    position:absolute;
    height:100%;
    width:100%;
    background: var(--color-variant);
}

.dropbtn {
    cursor: pointer;
}

.show {
    display: flex;
}

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

.dropdown-content {
    display: none;
    visibility: hidden;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 11;
    border-radius: 0.4rem;
    padding: 2rem;
    gap:1.5rem;
    flex-direction: column;
    opacity: 100%;
  }

  
/* Header styling Index.html */

header {
    position: relative;
    margin-top:4.5rem;
    margin-left:3.125rem;
    overflow:hidden;
    height:49.313rem;
    margin-bottom: 5rem;
    
}

header h1 {
    color:white;
    
}

header p {
    color:#CECECE;
    font-size: 1rem;
}

.header__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap:5rem;
    height: 25rem;
    margin-top:2rem;
}

.header__left {
    text-align: center;
}

.header__left p {
    margin: 1rem 0rem 2.375rem;
}


#Trialbutton {
    background-color: var(--color-primary);
    border-radius:0.625rem;
    border-style:solid;
    border:none;
    cursor:pointer;
    font-size: 1rem;
    color:white;
    height:3.175rem;
    width:17.563rem;
}

#Requestbutton {
    background-color:white;
    border-radius:0.625rem;
    border-style:solid;
    border:none;
    cursor:pointer;
    font-size: 1rem;
    color:#454545;
    height:3.175rem;
    width:10.563rem;
} 

#Trialbutton:hover {
    transition:var(--tranition-button);
    background-color:#20D62C; 
}

<!DOCTYPE html> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>DraftFlex</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
        <link rel="stylesheet" href="styles.css">
        
        <!-- Font-families -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">


        <!-- Fontawesome Icon -->
        <script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>

        <!-- Iconscout CDN -->
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    </head>
    
    <body> 
        <div id="startingbackground">
            <!-- Start of Navigation Menu -->
            <nav> 
            <div class="container nav__container">
                <a href="index.html"><img src="/icons/logo.svg" alt="logo"></a>
                <div class="nav__menu">
                  <div class="dropdown">
                    <button class="dropbtn switch" onclick="myFunction()">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></button>
                    <div class="dropdown-content" id="myDropdown">
                        <a href="#">Link1</a>
                        <a href="#">Link2</a>
                        <a href="#">Link3</a>
                    </div>
                  </div>
                       <a href="Pricing.html">Pricing</a>
                       <a href="Contact_Us.html">Contact Us</a>
                </div>  

                <div class="Login_nav">
                   <a href="#" class="Login">Login</a> 
                   <form><button id="Demobutton">Get demo</button></form>
                </div>
                
                <div class="Hamburger">
                   <button id="open-menu-btn"><i class="uil uil-bars"></i></button>
                   <button id="open-menu-btn"><i class="uil uil-multiply"></i></button>
                </div>
            </div>  
            </nav>
        <!-- End of Navigation Menu -->
           
        <!-- Start of Header -->
        <header>
        <div class="container header__container">
          <div class="header__left">
            <h1>The all-in-one draft to <br> deal platform</h1>
            <p>Our product enables your team to create, approve, sign and <br> manage your contracts in one workspace</p>

            <div class="Trialgroup">
            <form><button id="Trialbutton">Start Free 14-day Trial</button></form>
            <form><button id="Requestbutton">Request a Demo</button></form>
            </div>
          </div>

            <div class="header_right">
            </div>

        </div>
        </header>
    </div>

https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — epascarello, Jul 28 '22 at 17:21
I don't get it, I already assigned a click event, but my problem is that it is not properly showing up — paulman, Jul 28 '22 at 17:41
Your HTML is invalid so that is a start. Not sure how a button has an li as a child. I am not sure how a div is a child of a UL. Second issue you have is the target is what you click. So if you click a child of an element, it is the child, it will not be the parent. So checking if what you click is an exact element only works if that element has not children in it. answer is to use closest, but your HTML is invalid so one can only guess how the browser will end up rendering it. — epascarello, Jul 28 '22 at 17:43
I have correctly updated my html now, but what do you mean with targeting the element. In every tutorial they are showing the exact same javascript code. — paulman, Jul 29 '22 at 18:05
Well I guess every tutorial does not have children in the element. `window.addEventListener(click, function(event) { const btn = event.target.closest('.dropbtn'); if (btn) return; document.querySelectorAll('.dropdown-content.show').forEach(function (elem) { elem.classList.remove('show'); });});` — epascarello, Jul 29 '22 at 18:25

score 0 · Answer 1 · answered Jul 28 '22 at 17:50

0

first of all your dropdown doesn't get the class show after fixing this then your styles in class show will be overwritten by the dropdown styles itself you have to use !important

.show {
   display: flex !important;
   visibility: visible !important;
}

answered Jul 28 '22 at 17:50

MandanaMS

159
5

When I use the !important tags for display and visibility it appears to be working. What seems to cause that problem? I don't think it is an optimal solution to be using !important instead of finding the cause of the problem. – paulman Jul 29 '22 at 19:00
That's because your .show css is located before of the dropdown class styles which make the show class overwritten by dropdown styles, try to put .show after these classes to fix this – MandanaMS Jul 29 '22 at 19:39
Thank you that works!, do you have any solution on how to fix the clicking outside of the dropdown thing so it disappears? – paulman Jul 29 '22 at 20:00

Opening and Closing dropdown menu when clicking outside

1 Answers1