<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Document
</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{max-width: 640px; margin: 0 auto; background-color: #ddd;}
a{text-decoration: none; color: #333;}
.public_header{ height: 40px; line-height: 40px; border-bottom:1px solid #ebebeb; position: relative; background-color: #fff; }
.ph_icon_menu{ position: absolute; right: 0;top:0;width: 40px; height: 40px; display: block;}
.ph_icon_menu i{display: block;border-color:#f60;border-width:3px 0;border-style: solid;width: 20px;height:11px;margin:11px auto 0;position: relative;}
.ph_icon_menu i:before{content: "";position: absolute;left:0;top:4px;width: 20px;height:3px;background-color:#f60;}
.nav{ background-color: #fff; overflow: hidden; display: none; }
.nav a{ width: 25%; float: left; display: block; height: 30px; line-height: 30px; box-sizing: border-box; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; text-align: center; font-weight: 700; font-size: 14px;}
.red{ color: red; text-align: center; margin-top: 150px; }
</style>
</head>
<body>
<div class="public_header"><a href="javascript:;" class="ph_icon_menu" onclick="menuShowHide();"><i></i></a></div>
<div class="nav" id="J_menu_content">
<a href="#">1
</a>
<a href="#">2
</a>
<a href="#">3
</a>
<a href="#">4
</a>
<a href="#">5
</a>
<a href="#">6
</a>
<a href="#">7
</a>
<a href="#">8
</a>
</div>
<script type="text/javascript">
//第一种写法
// var obj = document.getElementById("J_menu_content");
// function menuShowHide() {
// if (obj.style.display == "block") {
// obj.style.display = "none";
// }else{
// obj.style.display ="block";
// }
// }
//第二种写法
var type = 1;
var obj = document.getElementById('J_menu_content');
function menuShowHide() {
if (type) {
obj.style.display="block";
type = 0;
}else {
obj.style.display="none";
type = 1;
}
}
</script>
<p class="red">注意：a标签要加上javascript:;才可以点击出效果
</p>
</body>
</html>
效果如图：
展开后：
如果文章中有不对之处，随时欢迎您的纠正~~
转载于:https://www.cnblogs.com/huanghuali/p/6479120.html
