<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击显示块</title>
<script src="script/jquery-2.1.4.js"></script> //引入jquery模块
<style> //设置初始样式
p{margin:0;padding:0;}
.content{width:400px;margin:0 auto;border: 1px solid #000;}
#btn{width:100%;height: 30px; line-height: 30px;background-color: #666;cursor: pointer;}
.txt{padding: 10px; text-indent:24px; display:block;}
</style>
</head>
<body>
<div class="content">
<p id="btn">点击</p>
<div class="txt">
CSS visibility 属性规定元素是否可见。visible 元素可见。hidden元素不可见。collapse 在表格元素中使用时，此值可删除一行或一列，但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元 素上，会呈现为 "hidden"。inherit 从父元素继承 visibility 属性的值。
<div>
</div>
<script>
$(function(){ //定义jquery函数方法
$("#btn").bind("click",function(){ //给#btn按钮绑定点击事件
if($(this).next().is(":visible")){ //如果这个按钮的下一个元素节点是显示状态，那么点击它会将他的下一个同辈元素隐藏。
$(this).next().hide(); //css的visibility属性的hidden与visible分别控制元素的隐藏与显示
}else{ //反之，将其显示。
$(this).next().show();
}
})
})
</script>
</body>
</html>
运行效果如图
