导航栏默认隐藏，页面有个按钮button点击后nav导航栏显示，再点一次按钮，nav导航栏隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航</title>
</head>
<body>
<input id="navdisplay" type="button" value="导航" />
<div id="nav">
<a href="#">栏目一</a>
<a href="#">栏目二</a>
<a href="#">栏目三</a>
<a href="#">栏目四</a>
</div>
<script>
var nav=document.getElementById("nav");
nav.style.display="none";
document.getElementById("navdisplay").onclick=function(){
if(nav.style.display=="none"){
nav.style.display="block";
}else{ nav.style.display="none"; }
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>导航</title>
</head>
<body>
<input id="navdisplay" type="button" value="导航" />
<div id="nav">
<a href="#">栏目一</a>
<a href="#">栏目二</a>
<a href="#">栏目三</a>
<a href="#">栏目四</a>
</div>
<script>
var nav=document.getElementById("nav");
nav.style.display="none";
document.getElementById("navdisplay").onclick=function(){
if(nav.style.display=="none"){
nav.style.display="block";
}else{ nav.style.display="none"; }
}
</script>
</body>
</html>
就是如此简单。
温馨提示：答案为网友推荐，仅供参考
