Dropdown-Menü schließt, wenn ich darauf klicke (überall)

Question

Ich habe ein Dropdown-Menü mit einem Anmelde-/Registrierungsformular, aber wenn ich versuche, auf den Formularinhalt zu klicken, wird das Menü geschlossen.

Ich habe versucht, etwas mit Javascript zu tun, dass es nur schließt, wenn ich auf den "X" -Button klicke, aber ich war nicht erfolgreich. Hier ist der Code:

with the hamburguer menu closed

with the hamburguer menu open

function animaIcon(x){ 
 
\t x.classList.toggle("change"); 
 
} 
 

 
function myFunction() { 
 
\t document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
$('.container').on('click', function() { 
 
\t if ($('.dropdown-content').css('opacity')==0) $('.dropdown-content').css('opacity', 0.95); 
 
\t else $('.dropdown-content').css('opacity', 0); 
 
});

/* HAMBURGUER MENU */ 
 

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

hier ein Element im Inneren .container ist, was geschieht, wenn ein Benutzer klickt:

• dem Click-Ereignis ist Auslöser auf dem Zielelement
• Das Ereignis bewegt sich in Richtung der Wurzel des DOM auslöst sich auf jedem Element entlang den Funden Art und Weise (der Begriff "Auslösung" kann irreführend sein); das Ereignis wird nur einmal ausgelöst.
• Wenn es zu .container kommt, wird Ihre Rückruffunktion aufgerufen und das Dropdown-Menü ist ausgeblendet.

um dieses Problem zu beheben, stellen Sie sicher, dass alle Click-Ereignisse für Elemente innerhalb .container (die Sie möchten NICHT Auslöser der Drop-down-Menü Zusammenbruch) Ausbreitung von diesem Ereignis stoppen.

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

Answer 3

Ok, konnte es mit diesen JavaScript-Code beheben:

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