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