重要：是通配符*
<!DOCTYPE html>
<html>
<head>
<style>
.reveal *{display: none;} //reveal下面任何东西都会变成不显示
/*class="reveal"的元素的子元素都不显示*/
.reveal *.handle{display: block;} //reveal下面的handle会显示
/*除了class="handle"这个元素*/
</style>
<script type="text/javascript">
window.onload = function(){
//找到所有class名为“reveal”的元素
var elements=document.getElementsByClassName("reveal");
for (var i = 0; i <elements.length; i++)
{
var elt=elements[i]; //找到容器中的"handle"元素
var title = elt.getElementsByClassName("handle")[0];
addRevealHandler(title,elt);
}
function addRevealHandler(title,elt)
{
title.onclick=function()
{
if (elt.className == "reveal")
elt.className="revealed";
else if (elt.className=="revealed")
elt.className="reveal";
}
}
};
</script>
</head>
<body>
<div class="reveal">
<h1 class="handle"> Click Here To Reveal Hidden Text</h1>
<p>
12345622
</p>
</div>
</body>
</html>
