<!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>
效果如图：
展开后：
如果文章中有不对之处，随时欢迎您的纠正~~