当前位置：首页 → 问答吧 → JS伸缩菜单，问题！

JS伸缩菜单，问题！

时间：2010-05-24

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>HIONEER</title> <style type="text/css"> .dn{ display:none;} .db{ display:block;} </style><script language="javascript"> function change(){ //通过父元素li，找到兄弟元素ul var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0]; //CSS交替更换来实现显、隐 if(oSecondDiv.className == "dn") oSecondDiv.className = "db"; else oSecondDiv.className = "dn"; } window.onload = function(){ var oUl = document.getElementById("listUL"); var aLi = oUl.childNodes; //子元素 var oA; for(var i=0;i<aLi.length;i++){ //如果子元素为li，且这个li有子菜单ul if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){ oA = aLi[i].firstChild; //找到超链接 oA.onmouseover = change; //动态添加点击函数 } } } </script> </head> <body> <div class="fl SubNav"> <div class="boxClass" id="navigation"> <div class="t"><h3 class="dn">Product Class</h3></div> <ul id="listUL"> <li><a href="index.asp" class="hover">Home</a></li> <li><a href="#">About Us</a> <ul class="dn"><li><a href='html/2010519150750.html'>- company</a></li><li><a href='html/2010519150809.html'>- production & distribution</a></li></ul> </li> <li><a href="#">Products</a> <ul class="dn"><li><a href=''>Garnet</a><ul><li><a href='html/2010519150940.html'>- waterjet abrasives</a><li><a href='html/2010519150948.html'>- blast abrasives</a></ul></li><li><a href='product.asp?BigClassID=45'>Sillimanite</a></li><li><a href=''>Other Products</a></li></ul> </li> <li><a href="#">Applications</a> <ul class="dn"><li><a href='html/2010519150833.html'>- waterjet cutting</a></li><li><a href='html/2010519150842.html'>- sandblasting</a></li><li><a href='html/2010519150853.html'>- water rurification</a></li><li><a href='html/2010519150903.html'>- refractory industry</a></li><li><a href='html/2010519150913.html'>- other applications</a></li></ul> </li> <li><a href="technical.asp">Technical Support</a></li> <li><a href="send.asp">Send Enquiries</a></li> <li><a href="contact.asp">Contact Us</a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

我想改成，鼠标点击其他的，上一次点击的就收起来，不在显示
CSS{.dn隐藏，.db显示}

[ 本帖最后由 iujianfeng 于 2010-5-24 10:07 编辑 ]

作者: iujianfeng 发布时间: 2010-05-24

找到一段代码，但是用不来

window.onload=function(){var s=document.getElementById('menu').getElementsByTagName('span');s[0].style.display='block';for(var a=0;a<s.length;a++){s[a].parentNode.onmousemove=function(){for(var b=0;b<s.length;b++){if(s.parentNode != this) s.style.display='none';else s.style.display='block';}};}};

二级菜单，会消失了

作者: iujianfeng 发布时间: 2010-05-24

JS伸缩菜单，问题！

热门阅读

热门下载