网站地图
【www.gdgbn.com--jquery】
原生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]赋值
}
}
}
完整实例
-简易点击展开关闭效果[原生js版]@mr.think
name:mr.think
blog:http://mrthink.net
date:2010.08.01
-简易点击展开关闭效果[jq版]@mr.think
name:mr.think
blog:http://mrthink.net
date:2010.08.01
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
/**
www.111cn.net
*/
//原生js版本@mr.think
window.onload=function(){
var divs=document.getelementsbytagname("div");//找到所有div元素
for(var i=0; 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>