参考：相关教程 js中的classList、toggle用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body, div,span{
padding:0;
margin:0;
}
body{
position: relative;
}
#main{
height: 100%;
width: 100%;
background-color:burlywood;
}
h1, #header, #main_page{
/* width: 1200px;
height: 100%;
margin:auto; */
text-align: center;
}
#menuButton{
display: none;
}
#menuButton span{
display: block;
height: 5px;
width:40px;
border-bottom:4px solid #000;
}
.navBox{
height: 40px;
/* position: absolute; */
}
.menu-list{
display: inline-block;
line-height:40px;
margin: 0 10px;
}
.menu-list a:hover{
color:chocolate;
}
.main_box{
min-height: 1000px;
}
/* @media screen and (min-width: 800px){
body{
background-color:darkgray;
}
} */
@media screen and (max-width: 400px){
#menuButton{
display:inline-block;
position:absolute;
top:0;
left:0;
cursor: pointer;
font-size: 0px;
}
nav{
width: 200px;
height: 100%;
position: absolute;
min-height: 1000px;
background-color:rgb(185, 175, 146);
transform: translate(-300px, 0);
transition: transform 0.3s ease;
}
nav.open{
-webkit-transform: translate(0, 0);
transform: translate(0,0);
}
}
</style>
</head>
<body>
<div id='main'>
<h1>Canvas menu</h1>
<div id='header'>
<header>
<div id='menuButton'>
<span></span>
<span></span>
<span></span>
</div>
<nav id='navMenu'>
<div class='navBox'>
<div class='menu-list item1'>
<a href='#'>item1</a>
</div>
<div class='menu-list item2'>
<a href='#'>item2</a>
</div>
<div class='menu-list item3'>
<a href='#'>item3</a>
</div>
</div>
</nav>
</header>
</div>
<main id='main_page'>
<div class='main_box'>
<p>正文文本</p>
</div>
</main>
</div>
<script src='../js/jquery-3.3.1.min.js'></script>
<script>
var menu = document.getElementById('menuButton');
var navList = document.getElementById('navMenu');
console.log('click:')
menu.addEventListener('click', function(e){
navList.classList.toggle('open');
e.stopPropagation();
console.log('in click');
});
$('#main_page').click(function(){
$('#navMenu').removeClass('open');
console.log('remove');
})
</script>
</body>
</html>