jquery 同一页面可多次调用折叠效果代码
jquery 同一页面可多次调用折叠效果代码
点击jq版区块的标题, 会有一个js错误, 那是因为获取js版下的h2时, 我偷了个懒, 把jq的也遍历进去了. 我想, 实际应用中, 也不会有人同一个效果, 一边用js一边用jq吧
//原生js版本 ***** start
window.onload=function(){
//共用函数区
var ibase={
//document.getelementbyid
id: function(name){return document.getelementbyid(name)},
//通过class获取元素
getbyclass: function(name,tagname,elem){
var c=[];
var re=new regexp('(^|s)'+name+'(|s$)');
var e=(elem || document).getelementsbytagname(tagname || '*');
for(var i=0; i < e.length; i++){
if(re.test(e[i].classname)){
c.push(e[i]);
}
}
return c;
},
//获取样式属性
attrstyle: function(elem,attr){
if(elem.attr){
return elem.style[attr];
}else if(elem.currentstyle){
return elem.currentstyle[attr];
}else if(document.defaultview && document.defaultview.getcomputedstyle){
attr=attr.replace(/([a-z])/g,'-$1').tolowercase();
return document.defaultview.getcomputedstyle(elem,null).getpropertyvalue(attr);
}else{
return null;
}
},
//获取祖辈元素中符合指定样式的元素
parents: function(elem,name){
var r=new regexp('(^|s)'+name+'(|s$)');
elem=elem.parentnode;
if(elem!=null){
return r.test(elem.classname) ? elem : ibase.parent(elem,name) || null;
}
},
//取索引值
index: function(cur,obj){
for(var i=0; i < obj.length; i++){
if(obj[i]==cur){
return i;
}
}
}
}
//变量定义
var listbox=ibase.getbyclass('js','div');
var navitem=ibase.id('demo').getelementsbytagname('h2');//此处将jq区块中的h2也取到了,所以页面会有个小小的错误
var icoitem=null,boxitem=null,boxdisplay=null,elemindex=null,elemparent=null;
//初始化展开第一个
for(var i=0; i < listbox.length;i++){
ibase.getbyclass('box','div',listbox[i])[0].style.display='block';
listbox[i].getelementsbytagname('span')[0].innerhtml='-';
}
//遍历所有点击项
for(var i=0; i < navitem.length;i++){
navitem[i].onclick=function(){
elemparent=ibase.parents(this,'js');//获取当前点击所在区块
navitem=elemparent.getelementsbytagname('h2');//获取当前区块下的点击项
icoitem=elemparent.getelementsbytagname('span');//获取当前区块下的展开关闭
boxitem=ibase.getbyclass('box','div',elemparent);//获取需要控制的区块
elemindex=ibase.index(this,navitem);//获取当前点击在当前区块点击项中的索引
//切换展开关闭图标
icoitem[elemindex].innerhtml= icoitem[elemindex].innerhtml=='-' ? '+' : '-';
if(ibase.attrstyle(boxitem[elemindex],'display')=='block'){
//控制项展开状态下,隐藏当前,展开其他的第一项
//此处有个展开0/1的判断,因为当点击第一个时是不能再展开第一个的
boxitem[elemindex].style.display='none';
if(elemindex==0){
boxitem[1].style.display='block';
icoitem[1].innerhtml='-'
}else{
boxitem[0].style.display='block'
icoitem[0].innerhtml='-'
}
}else{
//控制项展开状态下,展开当前,隐藏其他项
boxitem[elemindex].style.display='block';
for(var k=0;k < boxitem.length; k++){
if(k!=elemindex){
boxitem[k].style.display='none';
icoitem[k].innerhtml='+';
}
}
}
}
}
}
//jquery版本 ***** start
$(function(){
//变量定义区
var _listbox=$('.jq');
var _navitem=$('.jq>h2');
var _boxitem=null, _icoitem=null, _parents=null, _index=null;
//初始化第一个展开
_listbox.each(function(i){
$(this).find('div.box').eq(0).show();
$(this).find('h2>span').eq(0).text('-');
});
//遍历所有的点击项
_navitem.each(function(i){
$(this).click(function(){
//找到当前点击父元素为listbox(单个区块)的元素
_parents=$(this).parents('.listbox');
_navitem=_parents.find('h2');//此区块中的点击项
_icoitem=_parents.find('span');//此区块中的展开关闭图标
_boxitem=_parents.find('div.box');//此区块中展开关闭项
_index=_navitem.index(this);//取得当前点击在当前区块下点击项中的索引值
if(_boxitem.eq(_index).is(':visible')){
//若当前点击项下的展开关闭项是显示的,则关闭,同时展开另外项中的第一个
_boxitem.eq(_index).hide().end().not(':eq('+_index+')').first().show();
_icoitem.eq(_index).text('+').end().not(':eq('+_index+')').first().text('-');
}else{
//若当前点击项下的展开关闭项是隐藏的,则展开,同时隐藏其他项
_boxitem.eq(_index).show().end().not(':eq('+_index+')').hide();
_icoitem.eq(_index).text('-').end().not(':eq('+_index+')').text('+');
}
});
});
});
需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生js版本, 用同样的思路写了个jq版本. 时间关系, 写的也比较零散, 就没有封装
完整的实例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
/*demo css教程*/
#demo{padding-bottom:30px}
.listbox{float:left;width:29%;margin:5px 1%;padding:1%}
.listbox:hover{background:#f2f2f2;cursor:pointer}
.listbox h2{background:#6ce26c;margin-top:3px;border:2px solid #6ce26c;color:#fff;font-size:12px;text-indent:10px; line-height:24px;cursor:pointer}
.jq h2{background:#6ce;border:2px solid #6ce}
.listbox h2 span{float:right;margin-right:10px;font-size:16px}
.listbox div{display:none;padding:0.5em;border:2px solid #6ce26c; border-top:0;background:#fff;text-indent:10px; line-height:22px}
.jq div{border:2px solid #6ce}
</style>
<script>
window.onload=function(){
//共用函数区
var ibase={
//document.getelementbyid
id: function(name){return document.getelementbyid(name)},
//通过class获取元素
getbyclass: function(name,tagname,elem){
var c=[];
var re=new regexp('(^|s)'+name+'(|s$)');
var e=(elem || document).getelementsbytagname(tagname || '*');
for(var i=0; i<e.length; i++){
if(re.test(e[i].classname)){
c.push(e[i]);
}
}
return c;
},
//获取样式属性
attrstyle: function(elem,attr){
if(elem.attr){
return elem.style[attr];
}else if(elem.currentstyle){
return elem.currentstyle[attr];
}else if(document.defaultview && document.defaultview.getcomputedstyle){
attr=attr.replace(/([a-z])/g,'-$1').tolowercase();
return document.defaultview.getcomputedstyle(elem,null).getpropertyvalue(attr);
}else{
return null;
}
},
//获取祖辈元素中符合指定样式的元素
parents: function(elem,name){
var r=new regexp('(^|s)'+name+'(|s$)');
elem=elem.parentnode;
if(elem!=null){
return r.test(elem.classname) ? elem : ibase.parent(elem,name) || null;
}
},
//取索引值
index: function(cur,obj){
for(var i=0; i<obj.length; i++){
if(obj[i]==cur){
return i;
}
}
}
}
//变量定义
var listbox=ibase.getbyclass('js','div');
var navitem=ibase.id('demo').getelementsbytagname('h2');//此处将jq区块中的h2也取到了,所以页面会有个小小的错误
var icoitem=null,boxitem=null,boxdisplay=null,elemindex=null,elemparent=null;
//初始化展开第一个
for(var i=0; i<listbox.length;i++){
ibase.getbyclass('box','div',listbox[i])[0].style.display='block';
listbox[i].getelementsbytagname('span')[0].innerhtml='-';
}
//遍历所有点击项
for(var i=0; i<navitem.length;i++){
navitem[i].onclick=function(){
elemparent=ibase.parents(this,'js');//获取当前点击所在区块
navitem=elemparent.getelementsbytagname('h2');//获取当前区块下的点击项
icoitem=elemparent.getelementsbytagname('span');//获取当前区块下的展开关闭
boxitem=ibase.getbyclass('box','div',elemparent);//获取需要控制的区块
elemindex=ibase.index(this,navitem);//获取当前点击在当前区块点击项中的索引
//切换展开关闭图标
icoitem[elemindex].innerhtml= icoitem[elemindex].innerhtml=='-' ? '+' : '-';
if(ibase.attrstyle(boxitem[elemindex],'display')=='block'){
//控制项展开状态下,隐藏当前,展开其他的第一项
//此处有个展开0/1的判断,因为当点击第一个时是不能再展开第一个的
boxitem[elemindex].style.display='none';
if(elemindex==0){
boxitem[1].style.display='block';
icoitem[1].innerhtml='-'
}else{
boxitem[0].style.display='block'
icoitem[0].innerhtml='-'
}
}else{
//控制项展开状态下,展开当前,隐藏其他项
boxitem[elemindex].style.display='block';
for(var k=0;k<boxitem.length; k++){
if(k!=elemindex){
boxitem[k].style.display='none';
icoitem[k].innerhtml='+';
}
}
}
}
}
}
//jquery版本 ***** start
$(function(){
//变量定义区
var _listbox=$('.jq');
var _navitem=$('.jq>h2');
var _boxitem=null, _icoitem=null, _parents=null, _index=null;
//初始化第一个展开
_listbox.each(function(i){
$(this).find('div.box').eq(0).show();
$(this).find('h2>span').eq(0).text('-');
});
//遍历所有的点击项
_navitem.each(function(i){
$(this).click(function(){
//找到当前点击父元素为listbox(单个区块)的元素
_parents=$(this).parents('.listbox');
_navitem=_parents.find('h2');//此区块中的点击项
_icoitem=_parents.find('span');//此区块中的展开关闭图标
_boxitem=_parents.find('div.box');//此区块中展开关闭项
_index=_navitem.index(this);//取得当前点击在当前区块下点击项中的索引值
if(_boxitem.eq(_index).is(':visible')){
//若当前点击项下的展开关闭项是显示的,则关闭,同时展开另外项中的第一个
_boxitem.eq(_index).hide().end().not(':eq('+_index+')').first().show();
_icoitem.eq(_index).text('+').end().not(':eq('+_index+')').first().text('-');
}else{
//若当前点击项下的展开关闭项是隐藏的,则展开,同时隐藏其他项
_boxitem.eq(_index).show().end().not(':eq('+_index+')').hide();
_icoitem.eq(_index).text('-').end().not(':eq('+_index+')').text('+');
}
});
});
});
</script>
<div id="demo">
<div class="listbox js">
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
</div>
<div class="listbox js">
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
</div>
<div class="listbox jq">
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
</div>
<div class="listbox js">
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(原生js版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
</div>
<div class="listbox jq">
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
</div>
<div class="listbox jq">
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
<h2><span>+</span>多组处理,仅展开一个层(jq版)</h2>
<div class="box">
<p>name:mr.think</p>
<p>blog:<a href="http://zzzyk.com/">zzzyk.com</a></p>
<p>date:2010.12.31</p>
</div>
</div>
</div>
补充：网页制作,jquery 
