点击屏幕关闭canvas菜单
[英]Clicking the screen to close an off canvas menu
问题描述
I am using a off canvas menu similar to the one on W3 Schools by having two functions called to toggle the menu on/off using onclick.
我正在使用一个关闭的 canvas 菜单，类似于 W3 Schools 上的菜单，方法是调用两个函数来使用 onclick 切换菜单的开/关。 I am wanting to add in a function to be able to close the menu by clicking anywhere on the screen.我想添加一个 function 以便能够通过单击屏幕上的任意位置来关闭菜单。 I am new to Javascript and do not know how to be able to implement this.我是 Javascript 的新手，不知道如何实现这一点。 Any help would be great!任何帮助都会很棒！ Thanks!谢谢！
function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; document.body.style.backgroundColor = "white"; }
body { font-family: "Lato", sans-serif; transition: background-color.5s; }.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; } #main { transition: margin-left.5s; padding: 16px; } @media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;} }
<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> <div id="main"> <h2>Sidenav Push Example</h2> <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> </div> </body>
3 个解决方案
解决方案1
3 2019-11-21 17:19:50
as suggested by Matt U, you need to call closeNav on click on your main element by adding this in the html:正如 Matt U 所建议的，您需要通过在 html 中添加以下内容来调用closeNav点击您的主要元素：
...
<div id="main" onclick="closeNav()">
...
But you also need to stop the click to propagate (event bubbling) because if not, when you try to open the menu by clicking the button, the click bubbles to the main div and immediately closes the menu...但是您还需要停止单击以传播（事件冒泡），因为如果没有，当您尝试通过单击按钮打开菜单时，单击会冒泡到主 div 并立即关闭菜单...
so you need to add these lines to your javascript所以你需要将这些行添加到你的 javascript
document.getElementById("button")
.addEventListener("click", event => {
event.stopPropagation();
}
)
and an ID to the button和按钮的 ID
<span id="button" ...
here is a working example https://codepen.io/gui3/pen/mddogVj?editors=1010这是一个工作示例https://codepen.io/gui3/pen/mddogVj?editors=1010
解决方案2
2 2019-11-21 18:57:54
I have spent a lot of time on this and the following will work:我在这方面花了很多时间，以下将起作用：
window.onclick = function(event){if(event.target == document.getElementById('outerNav')){closeNav();}}; function openNav() { document.getElementById("outerNav").style.display = "block"; document.getElementById("mySidenav").style.transition = "0.5s";//I try to add the transition again. But it still doesn't display document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; document.body.style.backgroundColor = "white"; setTimeout(function(){ document.getElementById("outerNav").style.display = "none"; },500); }
body { font-family: "Lato", sans-serif; transition: background-color.5s; }.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; } #main { transition: margin-left.5s; padding: 16px; } @media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;} }.outerNav { display:none; position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden; background-color:transparent; }
<body> <div id="outerNav" class="outerNav"> <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> </div> <div id="main"> <h2>Sidenav Push Example</h2> <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> </div> </body>
我唯一想不通的是为什么一开始没有过渡。
I realize that the transition is a big deal but maybe there is a way to get the transition to work.
我意识到过渡很重要，但也许有办法让过渡发挥作用。
解决方案3
0 2019-11-21 16:37:43
Run your closeNav();运行你的closeNav(); function on your main element. function 在您的main元素上。 That way, if the user clicks off of the menu, the close function is triggered.这样，如果用户点击关闭菜单，就会触发关闭 function。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.