zhulf0804通过本文主要向大家介绍了hide,show等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
这仅仅是自己的学习笔记，只为记录自己的成长。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hide and show</title>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
$(".ex .hide").click(function(){
$(this).parent().children("p").hide(1000);
});
$(".ex .show").click(function(){
$(this).parent().children("p").show("slow");
});
$(".ex .showhide").click(function(){
$(this).parent().children("p").toggle(1000);
})
})
</script>
</head>
<body>
<h3>中国办事处</h3>
<div class="ex">
<p>联系人：张先生<br />
北三环中路 100 号<br />
北京</p>
<button class="hide" type="button">隐藏</button><br />
<button class="show" type="button">显示</button><br />
<button class="showhide">显示/隐藏</button>
</div>
<h3>美国办事处</h3>
<div class="ex">
<p>联系人：David<br />
第五大街 200 号<br />
纽约</p>
<button class="hide" type="button">隐藏</button><br />
<button class="show" type="button">显示</button><br />
<button class="showhide">显示/隐藏</button>
</div>
</body>
</html>