jquery展开、收缩列表

最新推荐文章于 2023-11-21 11:59:43 发布

苍羽

最新推荐文章于 2023-11-21 11:59:43 发布

阅读量929

点赞数

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

JQuery 同时被 3 个专栏收录

37 篇文章

订阅专栏

网站前端效果

22 篇文章

订阅专栏

网页特效

20 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单折叠面板效果。当点击标题时，面板下方的内容会以动画的形式展开或收起，为用户提供更好的交互体验。示例中包含了三个不同主题的折叠面板：对ASP感兴趣的程序、对PHP擅长的程序以及对前端开发擅长的插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>