jQuery 效果 - 滑动

最新推荐文章于 2021-03-12 18:06:13 发布

jony0303

最新推荐文章于 2021-03-12 18:06:13 发布

阅读量236

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/zjhwqx/article/details/52597676

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$(".flip1").click(function(){
$(".panel1").slideDown("slow");
});
$(".flip2").click(function(){
$(".panel2").slideUp("slow");
});
$(".flip3").click(function(){
$(".panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel1,div.panel2,div.panel3,p.flip1,p.flip2,p.flip3
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel1,div.panel3
{
height:120px;
display:none;<?php //控制是否已经下拉，当为none则没有下拉?>
}
div.panel2
{
height:120px;
}
</style>
</head>

<body>
<div class="panel1">
<p>标题slidedown()函数</p>
<p style="color:red">内容slidedown()函数</p>
</div>
<p class="flip1">请点击这里</p><br /><br />
<div class="panel2">
<p>标题slideUp()函数</p>
<p style="color:red">内容slideUp()函数</p>
</div>
<p class="flip2">请点击这里</p><br /><br />
<div class="panel3">
<p>标题slideToggle()函数</p>
<p style="color:red">内容slideToggle()函数</p>
</div>
<p class="flip3">请点击这里</p>
</body>
</html>