>웹 프론트엔드 >JS 튜토리얼 >네이티브 Js 및 jquery의 다중 그룹 처리, 하나의 block_javascript 기술의 접기 효과만 확장

네이티브 Js 및 jquery의 다중 그룹 처리, 하나의 block_javascript 기술의 접기 효과만 확장

WBOY
WBOY원래의
2016-05-16 18:12:161143검색

요구사항은 동일한 페이지에 여러 개의 작은 블록 그룹(고정되지 않음)이 있어야 하며, 각 그룹의 블록 수가 반드시 동일할 필요는 없습니다. 실제로는 한 번에 하나의 블록만 확장해야 합니다. 매우 간단합니다. 해당 블록이 숨겨져 있는 경우 탐색을 클릭하고, 동시에 해당 블록이 확장된 경우 동일한 그룹의 다른 블록을 숨기고 동시에 하나를 확장합니다. 처음에는 단순히 두 번의 순회만 하면 되는 줄 알았는데, 그렇지 않다는 것을 냉정하게 생각해보면 현재 그룹의 관련 요소를 살펴보는 것이 합리적입니다. 그런 다음 현재 그룹을 별도로 처리합니다. 이 아이디어에 따라 마침내 기능이 구현되었으며 동일한 아이디어를 사용하여 jQ 버전이 작성되었습니다. 사실 저는 이 아이디어가 별로 만족스럽지 않습니다. 더 좋은 아이디어가 있으면 알려주시기 바랍니다.
네이티브 Js 및 jquery의 다중 그룹 처리, 하나의 block_javascript 기술의 접기 효과만 확장
Js 오류가 있을 것입니다. jQ 버전 블록의 제목에 Js 버전에서 h2를 얻었을 때 게으른 나머지 jQ 버전도 통과했기 때문입니다. 실제 애플리케이션에서는 누구도 동일한 효과를 얻지 못할 것입니다. JS와 JS를 사용하면 됩니다. jQ를 동시에 보려면 여기를 클릭하세요

코드 복사 코드는 다음과 같습니다.

//原生Js版本 ***** start
window.onload=function(){
//共用函数区
var iBase={
//document. getElementById
Id: 함수(이름){return document.getElementById(이름)},
//통시class获取元素
GetByClass: 함수(이름,tagName,elem){
var c=[ ];
var re=new RegExp('(^|\s)' 이름 '(|\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.getCompulatedStyle){
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
return document.defaultView.getCompulatedStyle(elem,null).getPropertyValue(attr);
}else{
null을 반환합니다.
}
},
//获取祖辈元素中符합指정样式적원素
부모: function(elem,name){
var r=new RegExp('(^|\s )' 이름 '(|\s$)');
elem=elem.parentNode;
if(elem!=null){
return r.test(elem.className) ? elem : iBase.Parent(elem,이름) || 널;
}
},
//取索引值
색인: function(cur,obj){
for(var i=0; i < obj.length; i ){
if(obj[i]==cur){
return i;
}
}
}

}

//变weight정义
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='차단';
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]. 내부 HTML =='-' ? ' ' : '-'; <… 2019년 01월 1일에 다음 항목이 표시됩니다.
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版本 ***** 시작
$(function( ){
//变weight定义区
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(' ');
}
});
});
});


데모 주소: http://demo.jb51.net/js/jsjq-flod-onlyone/index.htm
패키지 다운로드: http://www.jb51. net/jiaoben/33950.html
저는 Mr.Think의 블로그 http://mrthink.net/jsjq-flod-onlyone/에서 왔습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.