1.布局:
<body>
<div class="panel">
<p>当前是单击进行滑动显示功能</p>
<p>进行单击按钮展现测试滑动信息</p>
</div>
<p class="flip">单击这里进行测试</p>
</body>
2.css设置:
<style type="text/css">
div.panel, p.flip
{
margin:0px;
padding:5px;
background-color:pink;
text-align:center;
border:solid 1px #b6ff00;
}
div.panel
{
width:280px;
height:200px;
display:none;
}
p.flip
{
width:280px;
height:10px;
}
3.js函数
<script>
$(document).ready(function () {
$(".flip").click(function () {
$(".panel").slideToggle(4000);--4000即4s进行展现或者隐藏
});
});
5:全部代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="Script/jquery-1.7.1.js"></script>
<title></title>
<script>
$(document).ready(function () {
$(".flip").click(function () {
$(".panel").slideToggle(4000);
});
});
</script>
<style type="text/css">
div.panel, p.flip
{
margin:0px;
padding:5px;
background-color:pink;
text-align:center;
border:solid 1px #b6ff00;
}
div.panel
{
width:280px;
height:200px;
display:none;
}
p.flip
{
width:280px;
height:10px;
}
</style>
</head>
<body>
<div class="panel">
<p>当前是单击进行滑动显示功能</p>
<p>进行单击按钮展现测试滑动信息</p>
</div>
<p class="flip">单击这里进行测试</p>
</body>
</html>