点击标题实现内容元素伸展和收缩代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了点击标题内容元素伸展和收缩效果。

代码实例如下:

<!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()一章节。

点击标题实现内容元素伸展和收缩代码实例

回复

我来回复
  • 暂无回复内容