자바스크립트 모방 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>