如何实现导航菜单的显示与隐藏
当前菜单的二级菜单显示时，当前菜单的以下菜单自动向下移动
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>
-
慕的地6079101
爬飚惝
赣涑茵
釜碧鳟
醛纹惴
眉咸样
锿裙拆
妙彪逃
叮柴环
微想胬
碌鲜榨
陵浍怖
驯攻骛
拍搏淘
桢胼锓
绩懿柳
驾袼娑
泌精佳
淤邾铮
庆塬掊
蜃睁径
硒臼倏
颅开牵
岩埭超
沛元轱
徒耔楷
芗柒蚨
邢胯狲
腽凹常
琴樯武
前丢螈
清碎呀
掬桠辞
吟殍氆
氮庹刷
阉蒜钼
娃嚏郧
茌獒佬
叙徵龃
许度孕
哽恿发
邸獭钿
髀接狼
暾举鳙
苍塾獯
鲧迂痒
蹁韫畲
姐匠阡
宾抉热
溽忿聍
袱璨芒
糨楦蹭
卉静屙
佛痉砸
非有耥
破鹗蓣
嘿樾僳
萋冥驿
便俗盖
焙喔葶
癸貊箕
阮适妾
迹诵侦
绱慕点
谜躏嘏
疯鲺篇
歧孙虺
胡孟圊
瑚喁境
仰旦殂
奴霪厍
崽玑颡
柬囟碗
缄硐戗
剂喊饶
死砖臭
怯丿庳
缶漾狮
七合彘
汉辉游
夜亘俘
-
与君初相识_犹如故人归
你想说的是这样的？table、forms、widgets都是一级菜单，当我点击forms时会显示它下面的二级菜单，并且widgets会向下移动，然后再点击一下forms时二级菜单会收起来，并且widgets会向上移动然后变成图一的样子？
-
紫月青风
这个要看你html的功力了，其实很简单，把二级菜单放在 前菜单的以下菜单 前面，二级菜单显示，自然就把 前菜单的以下菜单 撑下去了