자바스크립트 모방 QQ 인터페이스 접기 메뉴 구현 코드

최근 웹페이지에서 특수효과를 연구하다가 QQ 인터페이스에서 접는 메뉴를 보고 비슷한 것을 직접 작성해볼까 하는 생각이 들어서 온라인으로 확인해 보니 이미 유사한 메뉴 효과가 많이 있는 것 같습니다. 아무리 많아도 먼저 작성하겠습니다.

다음은 html 구조입니다

sdfds

dsfdsfsdfsd

dsf

..... .............

ID가 a인 것은 추가하려는 메뉴의 제목과 내용입니다.

아래는 자바스크립트 코드입니다 :

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

 
sx.activex.packmenu ={ 
create:function(t){ 
var a=document.createElement("div") 
var _t=t; 🎜>a.style.height="300px"; 
a.style.width="150px"; 
a.style.border="1px 빨간색 단색" 
a.style.overflow=" Hidden"; 
for(var i=0;i< ;t.length;i ){ 
var h=document.createElement("div"); 
var b=document.createElement("div" );; 
h.style.groundColor="blue "; 
h.style.height="10%"; 
b.style.padding="5px" 
b.style. textAlign="center"; 
b.style.border ="1px 녹색 고체"; 
h.innerHTML=t[i][0] 
b.innerHTML=t[i][1] ; 
b.style.overflow="숨김"; 
b.style.display="none" 
h.onclick=function() { 
if(this.nextSibling.style.display= ="none"){ 
this.nextSibling.style.height="1px"; 
this.nextSibling.style.display="block"; 
this.h=window.setInterval(function(t ,t1){ 
return function(){ 
if(!t1) return; 
//alert(t.nextSibling.offsetHeight); 
if(parseInt(t.nextSibling.style.height )<100-_t.length*parseInt(a.all[0].style.height)-3){ 
t.nextSibling.style.height =parseInt(t.nextSibling.style.height) 3 "% "; 
t1.style.height=parseInt(t1.style.height)-3 "%" 
} 
else{ 
t.nextSibling.style.height=100-_t.length *parseInt(a.all[0].style.height) "%" 
t1.style.display="none" 
t1 .style.height="0px"; 
window.clearInterval(t.h) 
} 
} 
}(this,(function(){ 
for(var ii=0;ii< ;a.all.length;ii ){ 
if (parseInt(a.all[ii].style.height)>10) 
return a.all[ii]} 
 })()),10); 
} 
else{ 
if(this!=this.parentNode.firstChild){ 
this.previousSibling.style.height="1px"; >this.previousSibling.style.display="block"; 
} 
else{ 
this.parentNode.lastChild.style.display="block" 
this.parentNode.lastChild.style. height="1px"; 
} 
this .h=window.setInterval(function(t,t1){ 
return function(){ 
if(!t1) return; 
if (parseInt(t.nextSibling.style.height)>3 ){ 
if(t!=t.parentNode.firstChild) 
t.previousSibling.style.height=parseInt(t.previousSibling.style.height ) 3 "%"; 
else 
t .parentNode.lastChild.style.height=parseInt(t.parentNode.lastChild.style.height) 3 "%" 
t1.style.height=parseInt (t1.style.height)-3 "%"; 


} 
else{ 
if(t!=t.parentNode.firstChild) 
t.previousSibling.style .height=100-_t.length*parseInt(a.all [0].style.height) "%"; 
else 
t.parentNode.lastChild.style.height=100-_t.length*parseInt (a.all[0].style.height) "% "; 
t.nextSibling.style.display="none"; 
t.nextSibling.style.height="0px"; .clearInterval(t.h); 
} 
} 
}(this,(function(){ 
for(var ii=0;ii if(parseInt(a.all[ii].style.height )>10) 
return a.all[ii]; 
})()),1); 
} 
a.appendChild(h); 
a.appendChild(b) 
a.all[1].style.display="block" 
a.all[1 ].style.height=100-t.length*parseInt( a.all[0].style.height) "%" 
} 
return 
} 
} 
 
 
입력 매개변수 t는 제목과 내용을 배열 항목 형식으로 하는 2차원 배열을 전달하려는 것입니다. 
다음은 호출 코드입니다. 
< html> 
 
 
 