老师,麻烦帮看看我的代码为什么不能实现: 二级菜单的展开啊? 谢谢哦

首页课程实战体系课手记专栏慕课教程

来源：6-1 案例总结

qq_默默_77

2018-07-27 02:12:14

<!DOCTYPE html>

<html>

<head>

<title>模范课堂范例</title>

*{margin: 0px; padding: 0px}

body{position: relative;}

#background-box{

width: 1200px; height: 460px;

margin-left: 50%;

left: -600px;

position: relative;

z-index: 1;

}

#background-box .italic-arrow{ position: absolute; color:white; z-index: 4;}

#background-box .left-fix-shade{

position: relative;

height: 460px; width: 246px;

background-color: black; opacity: 0.4;

position: absolute;

top: 0px;

z-index: 2;

}

#background-box #listBox{

list-style: none;

position: absolute;

top:3px;

background-color:transparent;

text-align: left;

left: 24.5px;

z-index: 4;

}

#background-box #listBox .list{

width: 197px; height: 69px;

border-bottom: 0.6px solid lightgray;

line-height: 69px;

color: white;

}

#background-box #listBox .list a{ text-decoration:none; color:white; display: block; float: left;}

#background-box #listBox .list i{ display: block; float: right;}

#background-box #shade{ width: 246px; height: 69px; background-color: black; opacity: 0.4; z-index: 3; position: absolute; top: 0px }

#arrow{ width: 954px; height: 76px; position: absolute; margin-left: 50%; left:-354px;top: 272px; z-index: 5}

#arrow #arrow1{ width: 40px; height: 76px; float: right; position: relative;}

#arrow #arrow1 img{ display: block; position: absolute; right: 0px; margin-top: 50%; }

#arrow #arrow2{ width: 40px; height: 76px; float: left; position: relative; }

#arrow #arrow2 img{display: block; position: absolute; left: 0px; margin-top: 50% }

#circles{ width: 99px; height: 15px; position: absolute; z-index: 5; margin-left: 50%; left:500px; top:410px;}

#circles .outerCircle{ width: 15px; height:15px; background-color: white; float: left; margin-right: 18px; position: relative; border-radius:7.5px;}

#circles .innerCircle{ width: 13px; height:13px; background-color: gray; margin-left: 50%; left: -6.5px; margin-top:50%; top:-6.5px;position: absolute; border-radius:6.5px;}

.sub-page{

width: 730px; height: 460px;

z-index: 5;

position: absolute;

margin-left: 50%; left:-354px;

top: 0px;

background-image: url("img/fe.png");

}

.sub-page .content{ margin-top:25px; margin-left: 40px; }

.sub-page .title{ color: red; font-weight:bold }

.sub-page .content .sub-row{ margin-top: 28px; margin-bottom: 28px; }

.sub-page .content .sub-row>span{ font-weight: bold }

.sub-page .content .sub-row span{ margin-right: 15px}

.sub-page .content .sub-row a{ text-decoration: none; color: gray; margin-right: 15px; }

</style>

</head>

<body>

<li class="list1 list"><a href="#">手机、配件</a><i>&gt</i></li>

</ul>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">网络机顶盒</a>

</div>

</div>

</div>

</div>

</div>

<a href="#">滚筒式洗衣机</a>

<a href="#">迷你洗衣机</a>

<a href="#">洗烘一体机</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

var listBox=document.getElementById("listBox");

var list=document.getElementById("listBox").getElementsByTagName("li"); //获取 list的对象集合

var backgroundBox=document.getElementById("background-box"); //获取背景盒子对象

var backImg=document.getElementById("backImg");

var shade=document.getElementById("shade"); //获取shade对象

var arrow1=document.getElementById("arrow1"); //获取导航arrow对象

var arrow2=document.getElementById("arrow2");

var subPage1=document.getElementById("subPage1"); //获取导航栏Subpage1对象

var subPage2=document.getElementById("subPage2"); //获取导航栏Subpage2对象

var subPage3=document.getElementById("subPage3"); //获取导航栏Subpage3对象

var subPage4=document.getElementById("subPage4"); //获取导航栏Subpage4对象

var outerCircle1=document.getElementById("outerCircle1");

var outerCircle2=document.getElementById("outerCircle2");

var outerCircle3=document.getElementById("outerCircle3");

arrow1.onmouseover=function(){ arrow1.style.backgroundColor="black"; arrow1.style.opacity="0.4" }

arrow2.onmouseover=function(){ arrow2.style.backgroundColor="black"; arrow2.style.opacity="0.4" }

arrow1.onmouseout=function(){ arrow1.style.backgroundColor=""}

arrow2.onmouseout=function(){ arrow2.style.backgroundColor=""}

list[0].onmouseover=function(){ shade.style.top="3px"; subPage1.style.display="block" }

list[0].onmouseout=function(){ subPage1.style.display="none" }

list[1].onmouseover=function(){ shade.style.top="72.6px"; subPage2.style.display="block" }

list[1].onmouseout=function(){ subPage2.style.display="none" }

list[2].onmouseover=function(){ shade.style.top="142.2px"; subPage3.style.display="block" }

list[2].onmouseout=function(){ subPage3.style.display="none" }

list[3].onmouseover=function(){ shade.style.top="211.8px"; subPage4.style.display="block" }

list[3].onmouseout=function(){ subPage4.style.display="none" }

//实现连播功能:

var arr=["img/bg1.jpg","img/bg2.jpg","img/bg3.jpg"];

var i=0;

function swiftPic()

{ if(i==2){ backImg.src=arr[i]; i=0; }else{ backImg.src=arr[i]; i=i+1; }

}

setInterval(swiftPic,500);

outerCircle1.onclick=function(){ backImg.src="img/bg1.jpg" }

outerCircle2.onclick=function(){ backImg.src="img/bg2.jpg" }

outerCircle3.onclick=function(){ backImg.src="img/bg3.jpg" }

</script>

</body>

</html>

写回答

1回答

好帮手慕夭夭

2018-07-27

已采纳

根据上传的代码测试 , js中当鼠标从第一个菜单移出后 ,设置整体的下拉菜单隐藏 :

如下鼠标移入第二个时 ,整体的div是隐藏的 ,

建议同学调整结构 , 把二级菜单写在以及菜单里面 ,如下结构 :

整体的盒子sidebar_item可以设置相对定位 , 然后二级菜单盒子设置绝对定位达到位置要求 , 然后设置隐藏 , 当鼠标移入到整体的盒子sidebar_item时显示二级菜单哦

实战一下吧 , 祝学习愉快 ! 望采纳

0 学习 · 36712 问题

查看课程

相似问题

最后是不是少了个onmouseout事件？？

回答 3

关于二级菜单显示的问题

回答 1

二级菜单展开有点问题

回答 2

老师，请问下面的代码，为啥点击按钮，不能实现切换图片的功能呢？

回答 2

如果一级菜单与二级菜单不在同一个盒子里？

回答 1

打开慕课网App查看更多内容