jQuery点击展开本列表内容隐藏其它列表内容的例子

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

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

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').click(function(){

$(this).children('.text').slideToggle().parents('.box').siblings('.box').children('.text').hide();

})

});

</script>

<style type="text/css">

.box{width:200px; margin:0 auto; background:#CCC;}

.text{display:none;}

</style>

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