jquery The fold effect code can be called multiple times on the same page

jquery The fold effect code can be called multiple times on the same page

Click on the title of JQ version block, there will be a JS error, that is because get JS version under the H2, I stole a lazy, the JQ also traversed. I think that the actual application, there will be no one effect, while using JS side with JQ bar


Original JS version * * * start


Window.onload=function () {


Shared function Area


var ibase={


document.getElementById


Id:function (name) {return document.getElementById (name)},


Get elements from 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;


},


Get style properties


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;


}


},


Gets the elements in the ancestor element that match the specified style


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


}


},


Fetch index Value


Index:function (cur,obj) {


for (Var i=0 i < obj.length; i++) {


if (obj[i]==cur) {


return i;


}


}


}

}

Variable definition


var listbox=ibase.getbyclass (' js ', ' div ');


var navitem=ibase.id (' demo '). getElementsByTagName (' H2 ')//The H2 in the JQ block is also taken here, so the page will have a small error


var icoitem=null,boxitem=null,boxdisplay=null,elemindex=null,elemparent=null;


Initialize to expand the first


for (Var i=0 i < listbox.length;i++) {


Ibase.getbyclass (' box ', ' div ', listbox[i]) [0].style.display= ' block ';


Listbox[i].getelementsbytagname (' span ') [0].innerhtml= '];


}


Iterate through all the clicks


for (Var i=0 i < navitem.length;i++) {


Navitem[i].onclick=function () {


Elemparent=ibase.parents (this, ' JS ');//Get current click on the Block


Navitem=elemparent.getelementsbytagname (' H2 ');//Get the click item under the current block


Icoitem=elemparent.getelementsbytagname (' span ');//Get the unwind off of the current block


Boxitem=ibase.getbyclass (' box ', ' div ', elemparent);/get the block that needs to be controlled


Elemindex=ibase.index (This,navitem)//Get current Click Index in current block click item


Toggle Expand Close Icon


Icoitem[elemindex].innerhtml= icoitem[elemindex].innerhtml== '-'? '+' : '-';


if (Ibase.attrstyle (Boxitem[elemindex], ' display ') = = ' block ') {


The control expands state, hides the current, and expands the other first item


Here's an expanded 0/1 judgment, because when you click on the first one, you can't start the first one.


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{


In the control expansion state, expand the current, hide other items


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 Version * * * start
$ (function () {
Variable definition Area
var _listbox=$ ('. JQ ');
var _navitem=$ ('. Jq>h2 ');
var _boxitem=null, _icoitem=null, _parents=null, _index=null;

Initialize first expansion
_listbox.each (function (i) {
$ (this). Find (' Div.box '). EQ (0). Show ();
$ (this). Find (' H2>span '). EQ (0). Text ('-');
});

Iterate through all the click items


_navitem.each (function (i) {


$ (this). Click (function () {


Locate the element that is currently clicked on the parent element as a ListBox (a single block)


_parents=$ (This). Parents ('. ListBox ');


_navitem=_parents.find (' H2 ');//Click items in this block


_icoitem=_parents.find (' span ');//Expand Close icon in this block


_boxitem=_parents.find (' Div.box ');//Expand close in this block


_index=_navitem.index (this)//get the index value of the current click on the item below the current block


if (_boxitem.eq (_index). Is (': Visible ')) {


If the expand close item under the current Click item is displayed, close, and then expand the first in the other item


_boxitem.eq (_index). Hide (). End (). isn't (': eq (' +_index+ ') '). A (). Show ();


_icoitem.eq (_index). Text (' + '). End (). Not (': eq (' +_index+ ') ').


}else{


If the expand close item under the current click Item is hidden, expand and hide Other items


_boxitem.eq (_index). Show (). End (). Not (': eq (' +_index+ ') '). Hide ();


_icoitem.eq (_index). Text ('-'). End (). Not (': eq (' +_index+ ') '). Text (' + ');


}


});


});


});

Requirements are, the same page, there are more than one group (not fixed), the number of blocks per group is not necessarily the same small block. Requires only one chunk to be expanded at a time. The principle of implementation is actually very simple, click Navigation, if its block is hidden, then expand it, at the same time, hidden away from the other blocks of the same group; If its block is expanded, hide it, and expand one of the other blocks in the same group. At first it was thought that a simple two traversal would be done. But that is not the case. Calmly thinking, it is reasonable to take the elements of the current group by clicking on the element and then handle the current group separately. Along this line of thought, the function finally realized, wrote the original JS version, with the same idea wrote a JQ version. Time relationship, writing is also more fragmented, there is no encapsulation

Complete instance

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>


<style>


/*demo CSS Tutorial * *


#demo {padding-bottom:30px}


. listbox{float:left;width:29%;margin:5px 1%;p adding: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 () {


Shared function Area


var ibase={


document.getElementById


Id:function (name) {return document.getElementById (name)},


Get elements from 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;


},


Get style properties


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;


}


},


Gets the elements in the ancestor element that match the specified style


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


}


},


Fetch index Value


Index:function (cur,obj) {


for (var i=0; i<obj.length; i++) {


if (obj[i]==cur) {


return i;


}


}


}





}





Variable definition


var listbox=ibase.getbyclass (' js ', ' div ');


var navitem=ibase.id (' demo '). getElementsByTagName (' H2 ')//The H2 in the JQ block is also taken here, so the page will have a small error


var icoitem=null,boxitem=null,boxdisplay=null,elemindex=null,elemparent=null;


Initialize to expand the first


for (var i=0; i<listbox.length;i++) {


Ibase.getbyclass (' box ', ' div ', listbox[i]) [0].style.display= ' block ';


Listbox[i].getelementsbytagname (' span ') [0].innerhtml= '];


}


Iterate through all the clicks


for (var i=0; i<navitem.length;i++) {


Navitem[i].onclick=function () {


Elemparent=ibase.parents (this, ' JS ');//Get current click on the Block


Navitem=elemparent.getelementsbytagname (' H2 ');//Get the click item under the current block


Icoitem=elemparent.getelementsbytagname (' span ');//Get the unwind off of the current block


Boxitem=ibase.getbyclass (' box ', ' div ', elemparent);/get the block that needs to be controlled


Elemindex=ibase.index (This,navitem)//Get current Click Index in current block click item


Toggle Expand Close Icon


Icoitem[elemindex].innerhtml= icoitem[elemindex].innerhtml== '-'? '+' : '-';


if (Ibase.attrstyle (Boxitem[elemindex], ' display ') = = ' block ') {


The control expands state, hides the current, and expands the other first item


Here's an expanded 0/1 judgment, because when you click on the first one, you can't start the first one.


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{


In the control expansion state, expand the current, hide other items


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 Version * * * start


$ (function () {


Variable definition Area


var _listbox=$ ('. JQ ');


var _navitem=$ ('. Jq>h2 ');


var _boxitem=null, _icoitem=null, _parents=null, _index=null;





Initialize first expansion


_listbox.each (function (i) {


$ (this). Find (' Div.box '). EQ (0). Show ();


$ (this). Find (' H2>span '). EQ (0). Text ('-');


});





Iterate through all the click items


_navitem.each (function (i) {


$ (this). Click (function () {


Locate the element that is currently clicked on the parent element as a ListBox (a single block)


_parents=$ (This). Parents ('. ListBox ');


_navitem=_parents.find (' H2 ');//Click items in this block


_icoitem=_parents.find (' span ');//Expand Close icon in this block


_boxitem=_parents.find (' Div.box ');//Expand close in this block


_index=_navitem.index (this)//get the index value of the current click on the item below the current block


if (_boxitem.eq (_index). Is (': Visible ')) {


If the expand close item under the current Click item is displayed, close, and then expand the first in the other item


_boxitem.eq (_index). Hide (). End (). isn't (': eq (' +_index+ ') '). A (). Show ();


_icoitem.eq (_index). Text (' + '). End (). Not (': eq (' +_index+ ') ').


}else{


If the expand close item under the current click Item is hidden, expand and hide Other items


_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> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


</div>


<div class= "ListBox js" >


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


</div>


<div class= "ListBox JQ" >


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


</div>

<div class= "ListBox js" >


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, only one layer (native JS version) is expanded </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


</div>


<div class= "ListBox JQ" >


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


</div>


<div class= "ListBox JQ" >


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


<h2><span>+</span> Multi-group processing, expand only one layer (JQ edition) </h2>


<div class= "box" >


<p>name:mr.think</p>


<p>blog:<a href= "http://111cn.net/" >111cn.net</a></p>


<p>date:2010.12.31</p>


</div>


</div>

</div>