代码描述：div显示和隐藏切换。div显示和隐藏切换代码实例
div显示和隐藏切换代码实例
2020-03-29 21:48:28点击一个按钮实现div的显示和隐藏的切换是常有的操作，下面就是实现此效果的一个代码实例。 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="https://www.51qianduan.com/" />
<title>div的显示和隐藏的切换-51前端</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size:15px;
}
#container {
margin:60px;
line-height:2em;
width:300px;
border:1px solid #CCC;
}
.head {
background:#999;
padding:5px;
cursor:pointer;
}
.content {
text-indent:15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("h5.head").hover(function(){
$("div.content").slideUp(3000);
},function(){
$("div.content").slideDown(3000);
})
})
</script>
</head>
<body>
<div id="container">
<h5 class="head">51前端</h5>
<div class="content">51前端欢迎您，51前端提供简单常用的基础教程</div>
</div>
</body>
</html>
150 200
用户评论
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 |
注册
