当我单击下拉菜单时（任意位置）关闭

Question

I have a dropdown menu with a login/register form, but when i try to click the form content, the menu closes.

I tried to do something with Javascript that it only closes when i click the "X" button but i wasnt sucessful. Here's the code:

with the hamburguer menu closed

with the hamburguer menu open

 function animaIcon(x){ x.classList.toggle("change"); } function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } $('.container').on('click', function() { if ($('.dropdown-content').css('opacity')==0) $('.dropdown-content').css('opacity', 0.95); else $('.dropdown-content').css('opacity', 0); }); 

 /* HAMBURGUER MENU */ .icone-menu { width: 100%; float: right; padding: 18px 8%; } .container { display: block; cursor: pointer; float: right; position: relative; } .dropdown-content { display: none; background-color: #111; width: 100vw; height: 100vh; margin-top: -55px; margin-left: -310px; position: absolute; opacity: 0; -webkit-transition: all 1s ease-in-out; } .dropdown-content a { font-weight: bold; font-size: 150%; color: white; padding: 100px 18px; display: block; float: left; } .down-botao a { color: #11E77C; font-weight: bold; } .dropdown-content button { padding: 10px; width: 40%; margin-left: 15px; font-weight: bolder; border-radius: 15px; background-color: black; border-style: solid; border-color: #dd3910; color: white; } .modal { background-color: #fff; width: 400px; padding: 30px; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-height: 420px; } .tab { float: left; &:first-of-type { margin-right: 15px; } } .dropdown-content a:hover { color: #13c7ae; } .show { display: block; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: white; margin: 6px auto; transition: 0.4s; position: relative; z-index: 1000 } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } 

 <nav class="icone-menu"> <a href="index.html"><img src="img/logo.png" alt="crossagenda" class="logo-mobile"></a> <div class="container" onclick="animaIcon(this), myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div id="myDropdown" class="dropdown-content"> <ul> <li><a href="#">Home</a></li> <li><a href="#">What</a></li> <li class="down-botao"><a href="#">Download</a></li> </ul> <div class="modal"> <div class="tab"> <input type="radio" id="sign-in" name="options" class="option" checked/> <label for="sign-in">Sign in</label> <form action="#" class="form"> <p class="float-label"> <label for="username">Username</label> <input type="text" id="username" name="username" placeholder="Username"/> </p> <p class="float-label"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Password"/> </p> <p> <input type="submit" value="Sign me in"/> </p> <div class="forgot"> <a href="#">Forgot your password?</a> </div> </form> </div> <div class="tab"> <input type="radio" id="sign-up" name="options" class="option"/> <label for="sign-up">Sign up</label> <form action="#" class="form"> <p class="float-label"> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="Email"/> </p> <p class="float-label"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Password"/> </p> <p class="float-label"> <label for="confirm-password">Confirm password</label> <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm password"/> </p> <p class="toggle"> <label for="accept"> <input type="checkbox" id="accept" name="accept"/> I accept the <a href="#">Terms &amp; Services</a></label> </p> <p> <input type="submit" value="Sign me up"/> </p> </form> </div> </div> </div> </div> 

Answer 1

 function animaIcon(x) { x.classList.toggle("change"); } function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); $('.modal').toggle(); } $('.container').on('click', function() { if ($('.dropdown-content').css('opacity') == 0) $('.dropdown-content').css('opacity', 0.95); else $('.dropdown-content').css('opacity', 0); }); 

 body { background-color: blue; } /* HAMBURGUER MENU */ .icone-menu { width: 100%; float: right; padding: 18px 8%; } .container { display: block; cursor: pointer; float: right; position: relative; } .dropdown-content { /*display: none;*/ background-color: #111; width: 100vw; height: 100vh; margin-top: -55px; margin-left: -310px; position: absolute; opacity: 0; -webkit-transition: all 1s ease-in-out; } .dropdown-content a { font-weight: bold; font-size: 150%; color: white; padding: 100px 18px; display: block; float: left; } .down-botao a { color: #11E77C; font-weight: bold; } .dropdown-content button { padding: 10px; width: 40%; margin-left: 15px; font-weight: bolder; border-radius: 15px; background-color: black; border-style: solid; border-color: #dd3910; color: white; } .modal { background-color: #fff; width: 400px; padding: 30px; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-height: 420px; display: none; } .tab { float: left; } tab:first-of-type { margin-right: 15px; } .dropdown-content a:hover { color: #13c7ae; } .show { opacity: 0.95; transition: opacity 1s ease-in-out; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: white; margin: 6px auto; transition: 0.4s; position: relative; z-index: 1000; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav class="icone-menu"> <a href="index.html"> <img src="img/logo.png" alt="crossagenda" class="logo-mobile"> </a> <div class="container" onclick="animaIcon(this), myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div id="myDropdown" class="dropdown-content"> <ul> <li><a href="#">Home</a> </li> <li><a href="#">What</a> </li> <li class="down-botao"><a href="#">Download</a> </li> </ul> </div> </div> <div class="modal"> <div class="tab"> <input type="radio" id="sign-in" name="options" class="option" checked /> <label for="sign-in">Sign in</label> <form action="#" class="form"> <p class="float-label"> <label for="username">Username</label> <input type="text" id="username" name="username" placeholder="Username" /> </p> <p class="float-label"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Password" /> </p> <p> <input type="submit" value="Sign me in" /> </p> <div class="forgot"> <a href="#">Forgot your password?</a> </div> </form> </div> <div class="tab"> <input type="radio" id="sign-up" name="options" class="option" /> <label for="sign-up">Sign up</label> <form action="#" class="form"> <p class="float-label"> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="Email" /> </p> <p class="float-label"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Password" /> </p> <p class="float-label"> <label for="confirm-password">Confirm password</label> <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm password" /> </p> <p class="toggle"> <label for="accept"> <input type="checkbox" id="accept" name="accept" />I accept the <a href="#">Terms &amp; Services</a> </label> </p> <p> <input type="submit" value="Sign me up" /> </p> </form> </div> </div> </nav> 

Answer 2

Here is what is happening when a user clicks an element inside .container :

• The click event is trigger on the target element
• The event travels toward the root of the DOM, triggering itself on each element it finds along the way (the term "triggering" may be misleading; the event is only "triggered" once).
• When it gets to .container , your callback function is invoked and the drop-down menu is collapsed.

To resolve this issue, make sure any click events for elements within .container (that you would like to NOT trigger the drop-down menu's collapse) stop propagation of that event.

$('.container .buttons').on('click',function(e) {
    e.stopPropagation();
    // do whatever
});

Answer 3

Ok, was able to fix it using this javascript code:

 $( "#btn-menu" ).click(function() { $(".dropdown-content").toggle("slow"); });