点击标题实现内容元素伸展和收缩代码实例
分类：实例代码
本章节分享一段代码实例，它实现了点击标题内容元素伸展和收缩效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:13px;
line-height:130%;
padding:60px
}
#panel{
width:300px;
border:1px solid #0050D0
}
.head{
padding:5px;
background:#96E555;
cursor:pointer
}
.content{
padding:10px;
text-indent:2em;
border-top:1px solid #0050D0;
display:block;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#panel h5.head").click(function(){
if($(this).next("div.content").is(":visible")){
$(this).next("div.content").slideUp();
}else{
$(this).next("div.content").slideDown();
}
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">前端教程网</h5>
<div class="content">本站的url地址是pipipi.net</div>
</div>
</body>
</html>
上面的代码实现了我们的要求效果，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function(){})，文档结构完全加载完毕再去执行函数中的代码。
（2）.$("#panel h5.head").click(function(){})，为标题元素注册click事件处理函数。
（3）.if($(this).next("div.content").is(":visible")),判断下面的内容元素是否是显示的。
（4）.$(this).next("div.content").slideUp(),如果元素是显示的，那么就向上收缩元素。
（5）.else{
$(this).next("div.content").slideDown();
},如果是隐藏的，那么就下拉显示元素。
二.相关阅读:
（1）.click事件可以参阅jQuery click事件一章节。
（2）.next()方法可以参阅jQuery next()一章节。
（3）.is()方法可以参阅jQuery is()一章节。
（4）.slideUp()方法可以参阅jQuery slideUp()一章节。
（5）.slideDown()方法可以参阅jQuery slideDown()一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu