Question

我需要创建一个侧边栏，该边栏可以单击X按钮并单击任意位置将其关闭我可以通过单击侧边栏中的X按钮来关闭导航栏。如何更改我的JavaScript，使其能够通过单击页面上的任意位置来关闭侧边栏？

	function openNav() {
		document.getElementById('mySidenav').style.width="250px";
	}
	function closeNav() {
		document.getElementById('mySidenav').style.width="0"
	}

	
	.sidenav {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		right: 0;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
		background-color: #111;
	}

	.sidenav a{

		display: block;
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		transition: 0.3s;
	}
	
	.sidenav a:hover{

		color: #F1F1F1;

	} 

	.sidenav .closebtn{
		
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 35px;
		margin-left: 50px;
	}

	@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()">&times;</a>
	<a href="#">CARRITO 1</a>
	<a href="#">CARRITO 2</a>

</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>




</body>

Answer 1

您可以通过以下方式收听整个页面上的点击：

document.body.onclick = function () {
  // Close Nav here
}

但是，这样做会导致整个页面在单击时试图关闭导航，甚至是打开按钮。

您可以通过e.stopPropagation()方法将某些元素排除在侦听在父元素上设置的事件之外。请参见下面的示例实现。

还请注意，由于内容不足，您的身体不会从窗口高度的100％开始，因此不会响应页面上所有位置的单击。您可以通过设置CSS属性body: 100vh来解决此问题。

function openNav(e) {
  e.stopPropagation();
  document.getElementById('mySidenav').style.width="250px";
}
	
function closeNav(e) {
  e.stopPropagation();
  document.getElementById('mySidenav').style.width="0"
}

document.body.onclick = closeNav;
document.getElementsByClassName('openbtn')[0].onclick = openNav;
document.getElementById('mySidenav').onclick = openNav;
document.getElementsByClassName('closebtn')[0].onclick = closeNav;

body {
  height: 100vh;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  background-color: #111;
}

.sidenav a {
  display: block;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  transition: 0.3s;
}
	
.sidenav a:hover {
  color: #F1F1F1;
} 

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 35px;
  margin-left: 50px;
}

@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">&times;</a>
	<a href="#">CARRITO 1</a>
	<a href="#">CARRITO 2</a>

</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" class="openbtn">cart</span>

</body>

Answer 2

显示侧边栏时，您可以轻松添加叠加元素。

function overlay(isShow){
  var elm = document.getElementById('overlay')
  if (isShow) {
    elm.style.display = 'block';
  } else {
    elm.style.display = 'none';
  }
}

function openNav() {
  overlay(true);
	document.getElementById('mySidenav').style.width="250px";
}

function closeNav() {
  overlay(false);
	document.getElementById('mySidenav').style.width="0"
}

	.sidenav {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 3;
		top: 0;
		right: 0;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
		background-color: #111;
	}

	.sidenav a{

		display: block;
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		transition: 0.3s;
	}
	
	.sidenav a:hover{

		color: #F1F1F1;

	} 

	.sidenav .closebtn{
		
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 35px;
		margin-left: 50px;
	}
  
  #overlay{
    z-index: 2;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
  }

	@media screen and (max-height: 450px){

		.sidenav{padding-top: 15px;}
		.sidenav a{font-size: 18px;}

	}

<div id="mySidenav" class="sidenav">
	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
	<a href="#">CARRITO 1</a>
	<a href="#">CARRITO 2</a>
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
<div id="overlay" onclick="closeNav()"></div>

打开关闭侧边栏，然后单击任意位置

2 个答案: