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

</p> <p><title>qq<a href="https://kunjuke.com/tag/148/" title="菜单" target="_blank">菜单</a></title> </p> <p>if (!document.getelementbyid)<br /> document.getelementbyid = function() { return null; }<br /> function initializemenu(menuid, actuatorid) {<br /> var menu = document.getelementbyid(menuid);<br /> var actuator = document.getelementbyid(actuatorid);<br /> if (menu == null || actuator == null) return;<br /> actuator.parentnode.style.backgroundimage = "url(/images/plus.gif)";<br /> actuator.onclick = function() {<br /> var display = menu.style.display;<br /> this.parentnode.style.backgroundimage =<br /> (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";<br /> menu.style.display = (display == "block") ? "none" : "block";<br /> return false;<br /> }<br /> }<br /> window.onload = function() {<br /> initializemenu("productsmenu", "productsactuator");<br /> initializemenu("newphonesmenu", "newphonesactuator");<br /> initializemenu("comparemenu", "compareactuator");<br /> } </p> <p>body {<br /> font-family: verdana, helvetica, arial, sans-serif;<br /> }<br /> #mainmenu {<br /> background-color: #eee;<br /> border: 1px solid #ccc;<br /> color: #000;<br /> width: 203px;<br /> }<br /> #menulist {<br /> margin: 0px;<br /> padding: 10px 0px 10px 15px;<br /> }<br /> li.menubar {<br /> background: url() no-repeat 0em 0.3em;<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> list-style: none outside;<br /> }<br /> .menu, .submenu {<br /> display: none;<br /> margin-left: 15px;<br /> padding: 0px;<br /> }<br /> .menu li, .submenu li {<br /> background: url() no-repeat 0em 0.3em;<br /> list-style: none outside;<br /> }<br /> a.actuator {<br /> background-color: transparent;<br /> color: #000;<br /> font-size: 12px;<br /> padding-left: 15px;<br /> text-decoration: none;<br /> }<br /> a.actuator:hover {<br /> text-decoration: underline;<br /> }<br /> .menu li a, .submenu li a {<br /> background-color: transparent;<br /> color: #000;<br /> font-size: 12px;<br /> padding-left: 15px;<br /> text-decoration: none;<br /> }<br /> .menu li a:hover, submenu li a:hover {<br /> text-decoration: underline;<br /> }<br /> span.key {<br /> text-decoration: underline;<br /> } </p> <ul id="menulist"> <li class="menubar"> 我有朋友圈 </p> <ul id="productsmenu" class="menu"> <li> 我的好友 </p> <ul id="newphonesmenu" class="submenu"> <li></li> <li></li> <li></li> </ul> </li> <li> 陌生人 </p> <ul id="comparemenu" class="submenu"> <li></li> <li></li> </ul> </li> </ul> </li> </ul> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]