对象化JS之----仿outlook或者QQ的菜单 _js 设计outlook菜单-优快云博客

本文介绍了一种使用HTML和JavaScript实现的可折叠文件夹样式的菜单系统。该菜单通过自定义JavaScript函数来控制文件夹的展开和折叠，并且具备上下滑动功能，适用于展示多层次的菜单结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

.folder1 {text-align:center; background: #00A4E1; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #FFFFFF #00BBFF; cursor: hand; font-size: 9pt}

.folder2 {text-align:center; background: #20C1FF; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}

.foldercont{background: #D9ECF4; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt; cursor: default;}

</style>

onload=function(){

var lstr = ""

for (var i=0; i<30; i++) lstr+= "haha..<br>";

var lofolder = new outlookfolder(null,335,100,15);

lofolder.addfolder("菜单1","1..<br>2..");

lofolder.addfolder("菜单2",lstr);

lofolder.addfolder("菜单3");

lofolder.addfolder("菜单4");

lofolder.addfolder("菜单5");

lofolder.showfolderX(0);

}

//[容器,高,宽,展开速度]

function outlookfolder(aoP,aih,aiw,ait){

if (aih==null) aih=200;

if (aiw==null) aiw="100%";

if (ait==null) ait=10;

var loMain = document.createElement("<span style='overflow:hidden;height:"+aih+";width:"+aiw+"'></span>");

var lsUniqueID = loMain.uniqueID;

var loSlide = document.createElement("span");

loSlide.innerHTML = "<button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>";

var liContH = aih;

if (aoP==null){

document.body.appendChild(loMain);

document.body.appendChild(loSlide);

}else{

aoP.appendChild(loMain);

aoP.appendChild(loSlide);

}

//增加一个目录[名字,内容]

loMain.addfolder = function(str,cont){

var loPar = document.createElement("SPAN");

loPar.innerHTML = "<span onclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width:100%;height:1' class='foldercont'></span>";

this.appendChild(loPar);

loPar.children[0].innerHTML = (str==null?"　":str);

loPar.children[1].innerHTML = (cont==null?"　":cont);

liContH -= parseInt(loPar.children[0].offsetHeight);

}

//打开／关闭第x个目录夹

loMain.showfolderX = function(aix){

loMain.showme(loMain.children[aix].children[0])

}

//打开/关闭当前obj所在的目录

loMain.showme = function(obj){

if (loMain.moving) return;

loMain.moving = true;

if (obj.bOpen){

obj.bOpen = false;

loMain.closefolder(obj.parentElement.children[1]);

obj.className = 'folder1';

}else{

obj.bOpen = true;

loMain.openfolder(obj.parentElement.children[1]);

obj.className = 'folder2';

var lxfolders = loMain.children;

for (var i=0; i<lxfolders.length; i++){

var loChild = lxfolders[i].children[0];

if(loChild.uniqueID!=obj.uniqueID){

lxfolders[i].children[1].style.height=1;

loChild.bOpen = false;

loChild.className = 'folder1';

}

loMain.SlideItemsAction(obj.parentElement.children[1]);

}

//为目录内容设置Slide

var loSlideItem = null;

var lbSlideing = false;

loMain.SlideCilckdown = function(){ //向下滚动

loSlideItem.scrollTop += 2;

if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1)

}

loMain.SlideCilckup = function(){ //向上滚动

loSlideItem.scrollTop -= 2;

if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1)

}

loMain.SlideClickStart = function(){ //允许开始滚动

lbSlideing=false;

}

loMain.SlideClickStop = function(){ //强制停止滚动

lbSlideing=true;

}

loMain.SlideItemsAction = function(obj){

var loUp = loSlide.children[0];

var loDown = loSlide.children[1];

if (obj.scrollHeight<=liContH||obj.parentElement.children[0].bOpen!=true){

loUp.style.display="none";

loDown.style.display="none";

}else{

loSlideItem = obj;

var lxOffset = getTrueOffset(obj);

var lileft = lxOffset[0]+obj.offsetWidth-20;

var litop = lxOffset[1]+obj.offsetHeight+5;

with(loUp.style){

display="";

left=lileft;

top=litop;

}

with(loDown.style){

display="";

left=lileft;

top=litop+liContH-40;

}

//逐渐关闭obj所在的内容显示

loMain.closefolder = function(obj,ai){

if (ai==null) ai=liContH;

if (ai<ait){ obj.style.height=1; ai=1}

if (ai>1){

obj.style.height = ai;

ai -= ait;

setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1)

return;

}

loMain.moving = false;

}

//逐渐打开obj所在的内容显示

loMain.openfolder = function(obj,ai){

if (ai==null) ai=1;

if (liContH>ai){

obj.style.height = ai;

ai += ait;

setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1)

return;

}

loMain.moving = false;

}

function getTrueOffset(e){

var x=0; var y=0;

if(!e)return [x,y];

while(e){

x+=parseInt(e.offsetLeft);

y+=parseInt(e.offsetTop);

e=e.offsetParent;

}

return [x,y];

}

return loMain;

}

</SCRIPT>