當我單擊下拉菜單時（任意位置）關閉

Question

我有一個帶有登錄/注冊表單的下拉菜單，但是當我嘗試單擊表單內容時，菜單關閉。

我嘗試使用Javascript進行操作，該Javascript僅在單擊“ X”按鈕時關閉，但未成功。 這是代碼：

漢堡菜單關閉

打開漢堡菜單

 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

這是當用戶單擊.container的元素時發生的情況：

• 點擊事件是在目標元素上觸發的
• 事件行進到DOM的根，在沿途找到的每個元素上觸發自身（術語“觸發”可能會誤導；事件僅“觸發”一次）。
• 當到達.container ，將調用您的回調函數，並且折疊下拉菜單。

若要解決此問題，請確保.container元素的所有click事件（您不希望不觸發下拉菜單的折疊）都停止了該事件的傳播。

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

Answer 3

好的，可以使用以下JavaScript代碼對其進行修復：

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