JS模拟的QQ面板上的多级可展开的菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>QQ菜单</TITLE> 
</HEAD> 
<BODY> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Aif%20(!document.getElementById)%20%0D%0Adocument.getElementById%20%3D%20function()%20%7B%20return%20null%3B%20%7D%20%0D%0Afunction%20initializeMenu(menuId%2C%20actuatorId)%20%7B%20%0D%0Avar%20menu%20%3D%20document.getElementById(menuId)%3B%20%0D%0Avar%20actuator%20%3D%20document.getElementById(actuatorId)%3B%20%0D%0Aif%20(menu%20%3D%3D%20null%20%7C%7C%20actuator%20%3D%3D%20null)%20return%3B%20%0D%0Aactuator.parentNode.style.backgroundImage%20%3D%20%22url(%2Fimages%2Fplus.gif)%22%3B%20%0D%0Aactuator.onclick%20%3D%20function()%20%7B%20%0D%0Avar%20display%20%3D%20menu.style.display%3B%20%0D%0Athis.parentNode.style.backgroundImage%20%3D%20%0D%0A(display%20%3D%3D%20%22block%22)%20%3F%20%22url(%2Fimages%2Fplus.gif)%22%20%3A%20%22url(%2Fimages%2Fminus.gif)%22%3B%20%0D%0Amenu.style.display%20%3D%20(display%20%3D%3D%20%22block%22)%20%3F%20%22none%22%20%3A%20%22block%22%3B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Awindow.onload%20%3D%20function()%20%7B%20%0D%0AinitializeMenu(%22productsMenu%22%2C%20%22productsActuator%22)%3B%20%0D%0AinitializeMenu(%22newPhonesMenu%22%2C%20%22newPhonesActuator%22)%3B%20%0D%0AinitializeMenu(%22compareMenu%22%2C%20%22compareActuator%22)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<style> 
body { 
font-family: verdana, helvetica, arial, sans-serif; 
} 
#mainMenu { 
background-color: #EEE; 
border: 1px solid #CCC; 
color: #000; 
width: 203px; 
} 
#menuList { 
margin: 0px; 
padding: 10px 0px 10px 15px; 
} 
li.menubar { 
background: url() no-repeat 0em 0.3em; 
font-size: 12px; 
line-height: 1.5em; 
list-style: none outside; 
} 
.menu, .submenu { 
display: none; 
margin-left: 15px; 
padding: 0px; 
} 
.menu li, .submenu li { 
background: url() no-repeat 0em 0.3em; 
list-style: none outside; 
} 
a.actuator { 
background-color: transparent; 
color: #000; 
font-size: 12px; 
padding-left: 15px; 
text-decoration: none; 
} 
a.actuator:hover { 
text-decoration: underline; 
} 
.menu li a, .submenu li a { 
background-color: transparent; 
color: #000; 
font-size: 12px; 
padding-left: 15px; 
text-decoration: none; 
} 
.menu li a:hover, submenu li a:hover { 
text-decoration: underline; 
} 
span.key { 
text-decoration: underline; 
} 
</style> 
</head> 
<body> 
<div id="mainMenu"> 
<ul id="menuList"> 
<li class="menubar"> 
<a href="#" _ewebeditor_ta_href="%23" id="productsActuator" class="actuator">我有朋友圈</a> 
<ul id="productsMenu" class="menu"> 
<li> 
<a href="#" _ewebeditor_ta_href="%23" id="newPhonesActuator" class="actuator">我的好友</a> 
<ul id="newPhonesMenu" class="submenu"> 
<li><a href="#" _ewebeditor_ta_href="%23">张三[10000001]</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">李四[10000002]</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">李四[10000002]</a></li> 
</ul> 
</li> 
<li> 
<a href="#" _ewebeditor_ta_href="%23" id="compareActuator" class="actuator">陌生人</a> 
<ul id="compareMenu" class="submenu"> 
<li><a href="#" _ewebeditor_ta_href="%23">张三[10000001]</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">李四[10000002]</a></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</div> 
</body> 
</BODY> 
</HTML>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程