Multi-group processing of native Js and jquery, only show the folding effect of one block _ javascript skills

On the same page, there are multiple groups (not fixed), and the number of blocks in each group is not necessarily the same. You need to expand only one block at a time. For more information, see. The requirement is that there are multiple groups (not fixed) on the same page, and the number of blocks in each group is not necessarily the same. only one block needs to be expanded at a time. the implementation principle is actually very simple. Click the navigation bar. If its block is hidden, expand it and hide other blocks in the same group. If its block is expanded, hide it, expand one of the other blocks in the same group. at the beginning, I thought it could be done simply by two simple traversal methods. but this is not the case. after calmly thinking, it is reasonable to obtain the relevant elements of the current group through the clicked elements and then process the current group separately. following this idea, the function was finally implemented. The native Js version was written and a jQ version was written in the same way. time relationship, write is scattered, there is no encapsulation. in fact, I am not very satisfied with this kind of thinking. I feel too scattered. If any master has a better idea, please enlighten me.

The title of the jQ block has a Js error. It is because when I obtained h2 under the Js version, I stole a lazy and traversed jQ. I think, in actual application, there will be no one with the same effect. Use jQ while using Js. core code click here to view the example

The Code is as follows:

// Native Js version ***** start
Window. onload = function (){
// Shared Function Area
Var iBase = {
// Document. getElementById
Id: function (name) {return document. getElementById (name )},
// Obtain elements through 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;
},
// Obtain style attributes
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;
}
},
// Obtain the elements that match the specified style in the ancestor Element
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;
}
},
// Retrieve the 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', 'P ');
Var navItem = iBase. Id ('Demo'). getElementsByTagName ('h2 '); // The h2 in the jQ block is also obtained here, so a small error occurs on the page.
Var icoItem = null, boxItem = null, boxDisplay = null, elemIndex = null, elemParent = null;
// Initialize and expand the first
For (var I = 0; I <listBox. length; I ++ ){
IBase. GetByClass ('box', 'P', listBox [I]) [0]. style. display = 'block ';
ListBox [I]. getElementsByTagName ('span ') [0]. innerHTML = '-';
}
// Traverse all click items
For (var I = 0; I <navItem. length; I ++ ){
NavItem [I]. onclick = function (){
ElemParent = iBase. Parents (this, 'js'); // obtain the currently clicked shard Block
NavItem = elemParent. getElementsByTagName ('h2 '); // obtain the click item under the current block
IcoItem = elemParent. getElementsByTagName ('span '); // you can call this operation to retrieve and close the current block.
BoxItem = iBase. GetByClass ('box', 'P', elemParent); // obtain the block to be controlled
ElemIndex = iBase. Index (this, navItem); // obtain the Index of the currently clicked item in the current block
// Switch to expand or close the icon
IcoItem [elemIndex]. innerHTML = icoItem [elemIndex]. innerHTML = '-'? '+ ':'-';
If (iBase. AttrStyle (boxItem [elemIndex], 'display') = 'block '){
// Hide the current state and expand the first State of the Control item
// Here is a judgment for expanding 0/1, because when you click the first button, you cannot expand 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 {
// Expand the current state of the Control item to 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 the First Expansion
_ ListBox. each (function (I ){
$ (This). find ('p. box'). eq (0). show ();
$ (This). find ('h2> span '). eq (0). text ('-');
});

// Traverse all click items
_ NavItem. each (function (I ){
$ (This). click (function (){
// Find the element whose parent element is listbox (single block ).
_ Parents = $ (this). parents ('. listbox ');
_ NavItem = _ parents. find ('h2 '); // click an item in this block
_ IcoItem = _ parents. find ('span '); // expand and close the icon in this block
_ BoxItem = _ parents. find ('p. box'); // expand and close items in this block
_ Index = _ navItem. index (this); // obtain the index value of the item clicked under the current block.
If (_ boxItem. eq (_ index). is (': visible ')){
// If the show and close items under the current click items are displayed, close them and expand the first one in the other items.
_ BoxItem. eq (_ index ). hide (). end (). not (': eq (' + _ index + ')'). first (). show ();
_ IcoItem. eq (_ index ). text ('+ '). end (). not (': eq (' + _ index + ')'). first (). text ('-');
} Else {
// If the show and close items under the current click items are 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
Package download: http://www.jb51.net/jiaoben/33950.html
I am from Mr. Think's blog http://mrthink.net/jsjq-flod-onlyone/