原生JS版和JQ版--点击展开/关闭效果

原生js版和jq版--点击展开/关闭效果

可扩展的简易点击展开/关闭效果,分别用原生网页特效和jquery实现.使用方法及相关解释,请参见源码.
另,授人以鱼,不如授人以渔.我写的只是一个原型,提供一个思路一种方法.注释中我也注明了,如果你想要酷炫的效果,你可以根据自己的实际需求扩展.

jquery

$(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()还可以得到很炫酷的效果
});

js

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]赋值
        }
    }
}

完整实例

<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-->
<!--@mr.think的统计及广告代码,使用样例请勿复制:)-->
<div id="adsense">
</div>

 

<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>
/**
 www.111cn.net
 */
//原生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>