單擊外部關閉幻燈片菜單 Javascript
[英]Click Outside To close slide menu Javascript
問題描述
嗨，我看到類似的問題，但沒有任何幫助頁面上的任何位置，菜單外，關閉菜單。
<head> <style>.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }.sidenav a:hover { color: #f1f1f1; }.sidenav.closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>Animated Sidenav Example</h2> <p>Click on the element below to open the side navigation menu.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script>
2 個解決方案
解決方案1
1 2019-11-03 20:06:04
在document上設置一個單擊事件偵聽器，並在該偵聽器中檢查實際click是否來自非菜單的任何內容。
<head> <style>.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }.sidenav a:hover { color: #f1f1f1; }.sidenav.closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>Animated Sidenav Example</h2> <p>Click on the element below to open the side navigation menu.</p> <span id="open" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } let sidebar = document.getElementById("mySidenav"); let open = document.getElementById("open"); document.addEventListener("click", function(event){ // If the event didn't originate from the open button or the sidebar, close it if(event.target.== sidebar && event;target;== open){ closeNav(); } }); </script>
解決方案2
1 已采納 2019-11-03 20:07:22
您可以監聽點擊並檢查目標在哪里，或者只是在整個頁面上創建一個覆蓋，並使用 class 作為打開菜單，而不是手動設置 sidenav 寬度：
function openNav() { document.body.classList.add('sidenav-open'); } function closeNav() { document.body.classList.remove('sidenav-open'); }
/* Same as you */.sidenav{height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background-color:#111;overflow-x:hidden;transition:.5s;padding-top:60px}.sidenav a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#818181;display:block;transition:.3s}.sidenav a:hover{color:#f1f1f1}.sidenav.closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px}@media screen and (max-height:450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}} #sidenav-overlay { position: fixed; top: 0; left: 0; width: 0; height: 100%; background: rgba(0, 0, 0, .1); cursor: pointer; z-index: 1; }.sidenav-open.sidenav { width: 250px; }.sidenav-open #sidenav-overlay { width: 100%; }
<div id="sidenav-overlay" onclick="closeNav()"></div> <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>Animated Sidenav Example</h2> <p>Click on the element below to open the side navigation menu.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
僅使用JavaScript在導航欄外部單擊后關閉下拉菜單嗎？
[英]Close dropdown menu after click outside of navbar using only JavaScript?
如何在外部點擊時使用Javascript關閉CSS下拉菜單？
[英]How to use Javascript to close css drop down menu on outside click?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.