Javascript模倣QQインターフェース折りたたみメニュー実装コード_ナビゲーションメニュー

最近、Web ページで特殊効果を研究しているのですが、QQ インターフェイスで折りたたみメニューを見つけたので、同じようなものを自分で作成することを思いつきました。そして、同じようなメニュー効果がすでにたくさんあることを知りました。いくつあっても、最初に書きます。

次は HTML 構造です:

sdfds

dsfdsfsdfsd

dsf

..........

ID a のものは、追加するメニューのタイトルとコンテンツです。

以下は JavaScript コードです :

コードをコピー コードは次のとおりです。

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 赤ベタ"; hidden";
for(var i=0;ivar h=document.createElement("div");
var b=document.createElement("div" );;
h.style.backgroundColor="blue ";
b.style.padding="5px"; textAlign="center";
b.style.border ="1px 緑色のソリッド";
b.innerHTML=t[i][1] ;
b.style.overflow="hidden";
b.style.display="none"; {
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 )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"; .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"; 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)-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(b);
a.all[1].style.display="block"; ].style.height=100-t.length*parseInt(a.all[0].style.height) "%";
}
return a;
}
}


エントリ パラメータ t は、タイトルとコンテンツの形式の 2 次元配列を配列項目として渡します。
以下は呼び出しコードです。
< html>