<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实例</title>
<style type="text/css">
<!-------设置内边距为0，使body置顶------>
/*!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。
语法格式：{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}
在CSS中，通过对某一样式声明! important ：
可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。
*/
body {padding-top: 0px !important;}
</style>
</head>
<body>
<!------------js：改变隐藏、显示---------------->
<script type="text/javascript">
/* 定义函数名字为isHidden,参数为hiddenmenu */
function isHidden(hiddenmenu)
{
/*添加变量，名为 hMenu，通过id获取参数*/
var hMenu=document.getElementById(hiddenmenu)
/*设置hMenu display属性：
如果原来是block（显示），则改为none（隐藏），否则改成block（显示）。
也可以写成：hMenu.style.display=(hMenu.style.display=='block')?'none':'block';
作用是每次点击后改变display的属性值，从而改变显示状态
*/
hMenu.style.display=(hMenu.style.display=='none')?'block':'none';
}
</script>
<!------------------html------------------->
<!--------点击时调用isHidden函数，参数为HiddenMenu(隐藏内容的id) -------->
<div onclick="isHidden('HiddenMenu')">
<p>点此查看</p>
<!-- 这里设置id为“HiddenMenu”,初始display的属性为none，即隐藏，那么打开网页的时候就不显示 -->
<div id="HiddenMenu" style="display: none">隐藏的内容</div>
</div>
</body>
</html>效果：
点击后：
