jquery列表点击合拢收缩与展开

时间：2014-03-22 09:57 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

似乎在网页上经常看到的效果，基于jquery实现的列表展开与收缩效果，鼠标点击标题后会合拢子内容项，jquery插件版本：jquery1.6.2，高版本jquery未做测试，不知是否兼容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

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