点击按钮实现div的显示和隐藏
分类：实例代码
本章节分享一段极为简单的代码实例，实现了点击按钮控制div的显示和隐藏。
比较适合初学者参考，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
html, body {
margin: 50px 300px;
padding: 0px;
width: 100%;
height: 100%;
}
#antzone {
width: 200px;
height: 300px;
background:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
$(".drop-down input").click(function () {
var div = $('#antzone');
if (div.is(':hidden')) {
div.show();
}
else {
div.hide();
}
});
})
</script>
</head>
<body>
<div class="drop-down">
<input type="button" value="点击" />
<div style="display:none" id="antzone"></div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$(".drop-down input").click(function () {})，为class属性值为drop-down的元素下面的input元素注册click事件处理函数。
（3）.var div = $('#antzone')，获取id属性值为antzone的元素对象。
（4）.if (div.is(':hidden')) { div.show();
}
else {
div.hide();
}，判断div元素是否处于隐藏状态，如果隐藏则显示，否则隐藏。
二.相关阅读:
（1）.is()可以参阅jQuery is()一章节。
（2）.show()可以参阅jQuery show()一章节。
（3）.hide()可以参阅jQuery hide()一章节。
（4）.:hidden可以参阅jQuery :hidden一章节。
点击按钮实现div的显示和隐藏，这样的场景在实际项目中还是用的比较多的，关于点击按钮实现div的显示和隐藏就介绍到这了。
点击按钮实现div的显示和隐藏属于前端实例代码，有关更多实例代码大家可以查看。