jquery展开、收缩列表

最新推荐文章于 2023-04-10 10:58:21 发布

苍羽

最新推荐文章于 2023-04-10 10:58:21 发布

阅读量892

点赞数

分类专栏：网页特效 JQuery JavaScript 网站前端效果

JQuery 同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

网站前端效果

22 篇文章 0 订阅

订阅专栏

网页特效

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
	<meta charset="UTF-8">
	<title>jquery展开、收缩</title>
	<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
	</head>
	<script type="text/javascript">
	// 收缩展开效果
	$(document).ready(function(){
		$(".box h2").toggle(function(){
			$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
		},function(){
			$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'});
		});
	});
	</script>
	<style>
	.text{
		display:none;
	}
	</style>
</head>
<body>
<div class="box">
    <h2>对ASP感兴趣的程序</h2>
    <div class="text">论坛类和文章类</div>
    </div>
</div>
<div class="box">
    <h2>对PHP擅长的程序</h2>
    <div class="text">博客类和新闻类</div>
    </div>
</div>
<div class="box">
    <h2>对前端开发擅长的插件</h2>
    <div class="text">jquery</div>
    </div>
</div>
</body>
</html>

苍羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery展开、收缩列表

jquery展开、收缩 // 收缩展开效果 $(document).ready(function(){ $(".box h2").toggle(function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); },function(){ $(this
复制链接

扫一扫