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 relatively fragmented, there is no encapsulation. In fact, this kind of thinking is not very satisfied, feel too dispersed, which Master has a better idea please enlighten.
JQ version of the block title, there will be a JS error, that is because get JS version of 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. Core code point this view sample
Copy Code code as follows:
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 (' + ');
}
});
});
});
Demo Address: http://demo.jb51.net/js/jsjq-flod-onlyone/index.htm
Packaged Downloads: http://www.jb51.net/jiaoben/33950.html
I'm from Mr.think's blog http://mrthink.net/jsjq-flod-onlyone/
