Jquery 收缩展开效果点击标题展开或者隐藏内容

最新推荐文章于 2025-07-23 12:36:04 发布

wangxiaohui6687

最新推荐文章于 2025-07-23 12:36:04 发布

阅读量9.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquary例子 js

本文链接：https://blog.csdn.net/wangxiaohui6687/article/details/8644246

js 同时被 2 个专栏收录

20 篇文章

订阅专栏

jquary例子

4 篇文章

订阅专栏

这篇博客展示了如何利用Jquery创建一个点击标题实现内容展开或隐藏的效果。通过简单的HTML和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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>收缩展开效果</title>
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script> //此处需要修改
<link type="text/css" rel="stylesheet" href="common/common.css" />
<style>
/* 收缩展开效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1px solid #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$(".box h1").toggle(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
</script>

<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
</div>
</div>

<br />

<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
1<br />
2<br />
</div>
</div>

</body>
</html>