<!DOCTYPE html>
<head>
<title>jQuery实现DIV层的收缩展开效果-纵向</title>
<meta charset="utf-8">
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;display:none;}
.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
// $(".xs1").toggle();
// $(".xs2").toggle();
});
});
</script>
<div class="panel">
<p>晨星博客 - 专注网站SEO优化及wordpress主题开发</p>
<p>晨星博客（ChenXingWeb.Com）专注WordPress程序周边及开发和南阳地区seo诊断，旨在为大家提供优质主题资源和服务，解决广大站长的建站需求。</p>
</div>
<p class="flip"><span class="1">展开</span><span class="2" style="display:none;">收起</span></p>
</body>
</html>
<head>
<title>jQuery实现DIV层的收缩展开效果-纵向</title>
<meta charset="utf-8">
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;display:none;}
.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
// $(".xs1").toggle();
// $(".xs2").toggle();
});
});
</script>
<div class="panel">
<p>晨星博客 - 专注网站SEO优化及wordpress主题开发</p>
<p>晨星博客（ChenXingWeb.Com）专注WordPress程序周边及开发和南阳地区seo诊断，旨在为大家提供优质主题资源和服务，解决广大站长的建站需求。</p>
</div>
<p class="flip"><span class="1">展开</span><span class="2" style="display:none;">收起</span></p>
</body>
</html>
扫一扫
751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
