如何实现导航菜单的显示与隐藏

1回答

小羊杨

用无序列表或者有序列表进行嵌套然后配套一下css就可以实现。下面是一个简单实现的代码，没有严谨的考虑兼容性，大概看一下把。望采纳<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>demo</title> <link rel="stylesheet" href=""> <style> ul>li>ul{ display:none; } ul>li>ul.on{ display:block; } </style> <script> window.onload=function(){ var menu=document.getElementById("menu"); var cls=menu.getElementsByClassName("first"); menu.onclick=function(e){ var e=e||window.event; var target=e.target||e.srcElement; if(target.className=="first"){ if(target.children[0].className=="on"){ target.children[0].className=""; }else{ for(var i=0;i<cls.length;i++){ cls[i].children[0].className=""; } target.children[0].className="on"; } } } } </script> </head> <body> <ul id="menu"> <li class="first">一级菜单 <ul class="on"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li class="first">一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li class="first">一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li class="first">一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li class="first">一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </body> </html>

1 0

慕的地6079101

爬飚惝赣涑茵釜碧鳟醛纹惴眉咸样锿裙拆妙彪逃叮柴环微想胬碌鲜榨陵浍怖驯攻骛拍搏淘桢胼锓绩懿柳驾袼娑泌精佳淤邾铮庆塬掊蜃睁径硒臼倏颅开牵岩埭超沛元轱徒耔楷芗柒蚨邢胯狲腽凹常琴樯武前丢螈清碎呀掬桠辞吟殍氆氮庹刷阉蒜钼娃嚏郧茌獒佬叙徵龃许度孕哽恿发邸獭钿髀接狼暾举鳙苍塾獯鲧迂痒蹁韫畲姐匠阡宾抉热溽忿聍袱璨芒糨楦蹭卉静屙佛痉砸非有耥破鹗蓣嘿樾僳萋冥驿便俗盖焙喔葶癸貊箕阮适妾迹诵侦绱慕点谜躏嘏疯鲺篇歧孙虺胡孟圊瑚喁境仰旦殂奴霪厍崽玑颡柬囟碗缄硐戗剂喊饶死砖臭怯丿庳缶漾狮七合彘汉辉游夜亘俘

0 0

与君初相识_犹如故人归

你想说的是这样的？table、forms、widgets都是一级菜单，当我点击forms时会显示它下面的二级菜单，并且widgets会向下移动，然后再点击一下forms时二级菜单会收起来，并且widgets会向上移动然后变成图一的样子？

0 0

紫月青风

这个要看你html的功力了，其实很简单，把二级菜单放在前菜单的以下菜单前面，二级菜单显示，自然就把前菜单的以下菜单撑下去了

0 0