<!doctype html>
<html>
<head>
<meta charset="gbk"/>
<title>简易的点击展开/关闭效果(原生JS版和JQ版)</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
/*demo css*/
#demo h2{background:#eee;font-size:12px;text-indent:10px; line-height:25px; border:2px solid #eee; cursor:pointer}
#demo h2 span{font-size:16px;float:right;margin-right:10px;}
#demo div{ text-indent:10px; line-height:22px;border:2px solid #eee; border-top:0;padding:0.5em}
</style>
<script>
/**
* @author Mr.Think
* @author blog http://mrthink.net/
* @2010.08.02
* 可自由转载及使用,但请注明版权归属
*/
//原生JS版本@Mr.Think
window.onload=function(){
var divs=document.getElementsByTagName('div');//找到所有div元素
for(var i=0; i<divs.length; i++){
if(divs[i].className!='jsdemo') continue;//如果元素class值不是jsdemo,继续查找
//divs[i].style.display='none'; //如果你想默认是隐藏状态,可取消此行注释
var title=divs[i].previousSibling;//通过上一个元素定位到标题元素
if(title.nodeType!=1){ //为了确保找到的是元素节点
title=title.previousSibling;
}
title.next=divs[i]; //设置标题的next属性并指向div[i]
title.onclick=function(){//点击事件
var curStyle=this.next.style.display;//取div[i]的默认display值,现在知道title.next的用意了吧
var newStyle;//定义新的display值
var ico=title.getElementsByTagName('span')[0];//包含展开关闭按钮的节点
if(curStyle=='none'){//取反实现点击的展开关闭
newStyle='block';//当默认值是隐藏时,切换成可见
ico.innerHTML='-';//切换展开关闭按钮
}else{
newStyle='none';//当默认值是可见时,切换成隐藏
ico.innerHTML='+';//切换展开关闭按钮
};
title.next.style.display=newStyle;//为点击后的div[i]赋值
}
}
}
//JQ版本@Mr.Think
$(function(){
var $title=$('div.jqdemo');//找到要显示/隐藏的元素
//$title.hide(); //如果你想默认是隐藏状态,可取消此行注释,下面两个切换函数换位
$title.prev().toggle(function(){//为显示/隐藏元素的前一个元素(取出标题元素)设置点击切换事件
$title.hide().prev().find('span').text('+');//第一次点击时,隐藏div元素,并找到标题元素中的span,切换按钮
},function(){
$title.show().prev().find('span').text('-');//第二次点击时,显示div元素,并找到标题元素中的span,切换按钮
});
//JQ的代码是不是简洁漂亮的多.哈哈.几句代码就搞定了.通过修改show()/hide()还可以得到很炫酷的效果
});
</script>
</head>
<body>
<div id="d_head">
<h1><a title="返回Mr.Think的博客" href="http://mrthink.net/">Mr.Think的博客</a><em>可自由转载及使用,但请注明出处.</em></h1>
<h2><span><a title="订阅Mr.Think的博客" href="http://mrthink.net/feed/">RSS Feed</a></span>@专注Web前端技术, 热爱PHP, 崇尚简单生活的凡夫俗子.</h2>
</div>
<div class="return">返回文章页:<a href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关闭效果(原生JS版和JQ版)</a></div>
<!--DEMO start-->
<div id="demo">
<h2><span>-</span>简易点击展开关闭效果[原生JS版]@Mr.Think</h2>
<div class="jsdemo">
<p>Name:Mr.Think</p>
<p>Blog:http://MrThink.net</p>
<p>Date:2010.08.01</p>
</div>
<br />
<br />
<h2><span>-</span>简易点击展开关闭效果[JQ版]@Mr.Think</h2>
<div class="jqdemo">
<p>Name:Mr.Think</p>
<p>Blog:http://MrThink.net</p>
<p>Date:2010.08.01</p>
</div>
</div>
<!--DEMO end-->
</body>
</html>
