<!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>