<!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>Jquery展开关闭内容块效果</title> | |
<script type="text/javascript" src="jquery-1.5.2.min.js"></script> | |
<script type="text/javascript"> | |
$(function(){ | |
$(".content").hide(); //隐藏所有主体内容 | |
$('.s').toggle(function(){ | |
//选择class为s的元素,并添加toggle方法 | |
//toggle方法可以切换元素的可见状态,如可见便切换隐藏,反之亦然 | |
$(this).text('隐藏').parent().nextAll('.content').slideDown(); | |
//给当前元素添加文本"隐藏",并找到父级元素之后的所有同辈元素.并添加向下展开效果 | |
},function(){ | |
$(this).text('展开').parent().nextAll('.content').slideUp(); | |
//给当前元素添加文本"展开",并找到父级元素之后的所有同辈元素.并添加向上收缩效果 | |
}); | |
}); | |
</script> | |
<style> | |
.demo .title{ font-size:12px; font-weight:bold; text-indent:10px; line-height:25px; margin-top:2px; background:#ccc; border:2px solid #eee;} | |
.demo .title span{ float:right; font-size:12px; margin-right:10px; color:#F00; cursor:pointer;} | |
.demo .content{ font-size:30px; font-weight:bold; text-indent:10px; border:2px solid #eee; border-top:none; padding:10px;} | |
</style> | |
</head> | |
<body> | |
<div class="demo"> | |
<div class="title">大家好,我是标题一<span class="s">展开</span></div> | |
<div class="content">大家好,我是内容一</div> | |
</div> | |
<div class="demo"> | |
<div class="title">大家好,我是标题二<span class="s">展开</span></div> | |
<div class="content">大家好,我是内容二</div> | |
</div> | |
</body> | |
</html> |
JQuery展开关闭内容块效果
最新推荐文章于 2022-06-17 11:53:10 发布