![outside]( "outside")
本文介绍了单击外部以关闭幻灯片菜单 Javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
我看到了类似的问题，但没有什么可以帮助我的，我有一个 javascript 菜单，我想在菜单外单击以关闭它，现在，您必须单击 X 来关闭菜单，我希望能够单击页面上菜单外的任何位置来关闭菜单.
<风格>.sidenav {高度:100%；宽度:0；位置:固定；z-索引:1；顶部:0；左:0；背景颜色:#111；溢出-x:隐藏；过渡:0.5s；填充顶部:60px；}.sidenav a {填充:8px 8px 8px 32px；文字装饰:无；字体大小:25px；颜色:#818181；显示:块；过渡:0.3s；}.sidenav a:悬停{颜色:#f1f1f1；}.sidenav .closebtn {位置:绝对；顶部:0；右:25px；字体大小:36px；左边距:50px；}@media 屏幕和(最大高度:450px){.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;}}</风格><身体><div id="mySidenav" class="sidenav"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a><a href="#">关于</a><a href="#">服务</a><a href="#">客户</a><a href="#">联系方式</a>
<h2>动画 Sidenav 示例</h2><p>点击下面的元素以打开侧边导航菜单.</p><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰打开</span><脚本>函数 openNav() {document.getElementById("mySidenav").style.width = "250px";}函数 closeNav() {document.getElementById("mySidenav").style.width = "0";}
解决方案
你可以监听点击并检查目标在哪里，或者只是在整个页面上创建一个覆盖层，并使用一个类作为打开菜单，而不是手动设置侧边导航宽度:
function openNav() {document.body.classList.add('sidenav-open');}函数 closeNav() {document.body.classList.remove('sidenav-open');}
/* 和你一样 */.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 {位置:固定；顶部:0；左:0；宽度:0；高度:100%；背景:rgba(0, 0, 0, .1);光标:指针；z-索引:1；}.sidenav-open .sidenav { 宽度:250px;}.sidenav-open #sidenav-overlay { 宽度:100%；}
<div id="sidenav-overlay" onclick="closeNav()"></div><div id="mySidenav" class="sidenav"><a href="#" class="closebtn" onclick="closeNav()">×</a><a href="#">关于</a><a href="#">服务</a><a href="#">客户</a><a href="#">联系方式</a>
<h2>动画 Sidenav 示例</h2><p>点击下面的元素以打开侧边导航菜单.</p><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰打开
Hi I see similar questions but nothing that can help me,I have a javascript menu, and I want to click outside the menu to close it, right now, you must click the X to close the menu, I want to be able to click anywhere on the page, outside the menu, to close the menu.
<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>
解决方案
You could listen for clicks and check where the target is, or just create an overlay all over the page, and use a class for the open menu, instead of manually setting the sidenav width:
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..