使用css3 可以不使用javascript 实现click效果
关键思想:
1.使用input 的checked 的伪类
2.使用 ~ 取消css 的层级关系
参考文档:http://tympanus.net/codrops/2012/12/17/css-click-events/
<!DOCTYPE html>
<html><head>
<title></title>
<meta charset="gbk">
<style type="text/css">
input:checked ~ .content
{
opacity:0;
}
.content
{
width: 100px;
transition: opacity 0.5s;
}
</style>
</head>
<body>
<input type="checkbox" id="input_checkbox" style="position: absolute;left: -99999px">
<label for="input_checkbox" style="cursor: pointer">点我隐藏下面内容</label>
<div class="content">这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容</div>
</body>
</html>