请问为什么移入二级菜单还是没显示出来。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/lunbo.css">
</head>
<body>
<div class="mainbox" id="mainbox">
<!-- 图片部分 -->
<div class="banner-box" id="banner-box">
<!-- 背景图 -->
<div class="slid-box" id="slidBox">
<div class="slid slid1"></div>
<div class="slid slid2"></div>
<div class="slid slid3"></div>
</div>
<!-- 两个小箭头 -->
<a href="#" class="button btnL" id="btnL">
</a>
<a href="#" class="button btnR" id="btnR">
</a>
<!-- 图下面3个点 -->
<div class="main-active" id="dot">
<span class=" dott active "></span>
<span class="dott"></span>
<span class="dott"></span>
</div>
</div>
<!-- 导航部分 -->
<!-- 一级菜单 -->
<div class="menu-box">
<!-- 导航下的遮罩 -->
<div class="a"></div>
<!-- 一级菜单的内容 -->
<div class="item-box" id="item-box">
<div class="menu-item menu-item1">
<a href="#">
<span>手机、配件</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>电脑</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家具</span>
<i></i>
</a>
</div>
</div>
</div>
<!-- 二级菜单 -->
<div class="sub-menu hide" id="sub-menu">
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">手机、配件</div>
<div class="sub-row">
<span class="bold mr10">手机通讯：</span>
<a href="">手机</a>
<span class="ml10 mr10">/</span>
<a href="">手机维修</a>
<span class="ml10 mr10">/</span>
<a href="">以旧换新</a>
</div>
<div class="sub-row">
<span class="bold mr10">手机配件：</span>
<a href="">手机壳</a>
<span class="ml10 mr10">/</span>
<a href="">手机存储卡</a>
<span class="ml10 mr10">/</span>
<a href="">数据线</a>
<span class="ml10 mr10">/</span>
<a href="">充电器</a>
<span class="ml10 mr10">/</span>
<a href="">电池</a>
</div>
<div class="sub-row">
<span class="bold mr10">运营商：</span>
<a href="">中国联通</a>
<span class="ml10 mr10">/</span>
<a href="">中国移动</a>
<span class="ml10 mr10">/</span>
<a href="">中国电信</a>
</div>
<div class="sub-row">
<span class="bold mr10">智能设备：</span>
<a href="">智能手环</a>
<span class="ml10 mr10">/</span>
<a href="">智能家居</a>
<span class="ml10 mr10">/</span>
<a href="">智能手表</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">娱乐：</span>
<a href="">耳机</a>
<span class="ml10 mr10">/</span>
<a href="">音响</a>
<span class="ml10 mr10">/</span>
<a href="">收音机</a>
<span class="ml10 mr10">/</span>
<a href="">麦克风</a>
</div>
</div>
</div>
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">电脑</div>
<div class="sub-row">
<span class="bold mr10">电脑：</span>
<a href="">笔记本</a>
<span class="ml10 mr10">/</span>
<a href="">平板</a>
<span class="ml10 mr10">/</span>
<a href="">一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">电脑配件：</span>
<a href="">显示器</a>
<span class="ml10 mr10">/</span>
<a href="">CPU</a>
<span class="ml10 mr10">/</span>
<a href="">主板</a>
<span class="ml10 mr10">/</span>
<a href="">硬盘</a>
<span class="ml10 mr10">/</span>
<a href="">电源</a>
<span class="ml10 mr10">/</span>
<a href="">显卡</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">游戏设备：</span>
<a href="">游戏机</a>
<span class="ml10 mr10">/</span>
<a href="">耳机</a>
<span class="ml10 mr10">/</span>
<a href="">游戏软件</a>
</div>
<div class="sub-row">
<span class="bold mr10">网络产品：</span>
<a href="">路由器</a>
<span class="ml10 mr10">/</span>
<a href="">网络机顶盒</a>
<span class="ml10 mr10">/</span>
<a href="">交换机</a>
<span class="ml10 mr10">/</span>
<a href="">存储卡</a>
<span class="ml10 mr10">/</span>
<a href="">网卡</a>
</div>
<div class="sub-row">
<span class="bold mr10">外部产品：</span>
<a href="">鼠标</a>
<span class="ml10 mr10">/</span>
<a href="">键盘</a>
<span class="ml10 mr10">/</span>
<a href="">U盘</a>
<span class="ml10 mr10">/</span>
<a href="">移动硬盘</a>
<span class="ml10 mr10">/</span>
<a href="">鼠标垫</a>
<span class="ml10 mr10">/</span>
<a href="">电脑清洁</a>
</div>
</div>
</div>
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家用电器</div>
<div class="sub-row">
<span class="bold mr10">电视：</span>
<a href="">国产品牌</a>
<span class="ml10 mr10">/</span>
<a href="">韩国品牌</a>
<span class="ml10 mr10">/</span>
<a href="">欧美品牌</a>
</div>
<div class="sub-row">
<span class="bold mr10">空调：</span>
<a href="">显示器</a>
<span class="ml10 mr10">/</span>
<a href="">柜式</a>
<span class="ml10 mr10">/</span>
<a href="">中央</a>
<span class="ml10 mr10">/</span>
<a href="">壁挂式</a>
</div>
<div class="sub-row">
<span class="bold mr10">冰箱：</span>
<a href="">多门</a>
<span class="ml10 mr10">/</span>
<a href="">对开门</a>
<span class="ml10 mr10">/</span>
<a href="">三门</a>
<span class="ml10 mr10">/</span>
<a href="">双门</a>
</div>
<div class="sub-row">
<span class="bold mr10">洗衣机：</span>
<a href="">滚筒式洗衣机</a>
<span class="ml10 mr10">/</span>
<a href="">迷你洗衣机</a>
<span class="ml10 mr10">/</span>
<a href="">洗烘一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨房电器：</span>
<a href="">油烟机</a>
<span class="ml10 mr10">/</span>
<a href="">洗碗机</a>
<span class="ml10 mr10">/</span>
<a href="">燃气灶</a>
</div>
</div>
</div>
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家具</div>
<div class="sub-row">
<span class="bold mr10">家纺：</span>
<a href="">被子</a>
<span class="ml10 mr10">/</span>
<a href="">枕头</a>
<span class="ml10 mr10">/</span>
<a href="">四件套</a>
<span class="ml10 mr10">/</span>
<a href="">床垫</a>
</div>
<div class="sub-row">
<span class="bold mr10">灯具：</span>
<a href="">台灯</a>
<span class="ml10 mr10">/</span>
<a href="">顶灯</a>
<span class="ml10 mr10">/</span>
<a href="">节能灯</a>
<span class="ml10 mr10">/</span>
<a href="">应急灯</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨具：</span>
<a href="">烹饪锅具</a>
<span class="ml10 mr10">/</span>
<a href="">餐具</a>
<span class="ml10 mr10">/</span>
<a href="">菜板刀具</a>
</div>
<div class="sub-row">
<span class="bold mr10">家装：</span>
<a href="">地毯</a>
<span class="ml10 mr10">/</span>
<a href="">沙发垫套</a>
<span class="ml10 mr10">/</span>
<a href="">装饰字画</a>
<span class="ml10 mr10">/</span>
<a href="">照片墙</a>
<span class="ml10 mr10">/</span>
<a href="">窗帘</a>
</div>
<div class="sub-row">
<span class="bold mr10">生活日用：</span>
<a href="">收纳用品</a>
<span class="ml10 mr10">/</span>
<a href="">浴室用品</a>
<span class="ml10 mr10">/</span>
<a href="">雨伞雨衣</a>
</div>
</div>
</div>
</div>
<script src="js/style.js"></script>
</div>
</body>
</html>
//CSS样式
*{
margin: 0;
padding: 0;
text-decoration: none;
cursor: pointer;
}
.mainbox{
width: 1200px;
height: 460px;
margin: 0 auto;
position: relative;
}
.banner-box{
width: 1200px;
height: 460px;
z-index: 1;
}
/* 图片部分 */
.slid-box{
width: 1200px;
height: 460px;
overflow: hidden;
}
.slid{
width: 1200px;
height: 460px;
float: left;
}
.slid1{
background: url(../img/bg1.jpg);
}
.slid2{
background: url(../img/bg2.jpg);
}
.slid3{
background: url(../img/bg3.jpg);
}
/* 两个小箭头 */
.btnL{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background: url(../img/arrow.png) no-repeat center;
transform: rotate(180deg);
}
.btnR{
position: absolute;
width: 40px;
height: 80px;
right: 0px;
top: 50%;
margin-top: -40px;
background: url(../img/arrow.png) no-repeat center;
}
.button:hover{
background:#333;
opacity: 0.2;
filter: alpha(opacity=80);
}
/* 图片下的3个点 */
.main-active{
line-height: 12px;
position: absolute;
bottom: 24px;
right: 0;
padding-right:24px ;
}
.main-active .dott{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .8) inset;
}
.main-active .active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, .4) inset;
background: #fff;
}
/* 菜单栏 */
.a{
position: absolute;
top: 0;
left: 0;
width: 244px;
height: 460px;
background: rgba(7, 17, 27, .2);
z-index: 2;
}
.item-box{
position: absolute;
top: 0;
left: 0;
width: 244px;
height: 460px;
z-index: 3;
}
.menu-item{
height: 62px;
width: 244px;
line-height: 64px;
font-size: 16px;
position: relative;
}
/* .menu-item1{
background: rgba(12, 12, 12, 0.4);
} */
.menu-item a{
display: block;
color: #fff;
margin: 0 20px;
padding: 0 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
height: 63px;
font-size:16px;
}
.menu-item i{
font-style: normal;
display: inline-block;
width: 16px;
height: 30px;
background: url(../img/arrow.png);
position: absolute;
right: 30px;
top: 50%;
margin-top: -15px;
transform: scale(.5,.5);
}
/* 二级菜单 */
.sub-menu{
height:460px ;
width: 730px;
position: absolute;
left: 244px;
top: 0;
overflow: hidden;
}
.hide{
display: none;
}
.inner-box{
height:460px ;
width: 730px;
}
.sub-inner-box{
height:460px ;
width: 730px;
background: url(../img/fe.png);
}
.sub-inner-box .title{
color: red;
padding: 25px 10px;
font-size: 20px;
font-weight: bold;
}
.sub-inner-box .bold{
padding:0 10px ;
}
.sub-inner-box .ml10{
padding: 0 10px;
}
///JS
// 封装添加事件方法
function addHandler(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler)
}
else{element["on"+type]=handler}
}
//封装获取ID的方法
function byId(id){
if(typeof(id)==="string"){
return document.getElementById(id);
}
else {
return id;
}
}
var index=0; //定义一个数值为0的变量，用于接收索引；
var timer=null; //初始化一个变量，用于接收定时器;
var btnL=byId("btnL"),btnR=byId("btnR");
var slidBox=byId("slidBox");
var pics=slidBox.getElementsByClassName("slid");
var dots=byId("dot").getElementsByTagName("span");
//给两个小箭头添加事件
addHandler(btnR,"click",function(){
index++;
if(index>=pics.length){
index=0
};
// //先把每一个图片和圆点的样式隐藏，点击一次显示对应的图片和圆点样式 (可封装成通用函数)
for(var i=0;i<pics.length;i++){
pics[i].style.display="none";
dots[i].className="dott";
}
pics[index].style.display="block";
dots[index].className="active dott"
}
);
//左箭头
addHandler(btnL,"click",function(){
index--;
if(index<0){
index=pics.length-1
}
console.log(index)
//先把每一个图片和圆点的样式隐藏，点击一次显示对应的图片和圆点样式 (可封装成通用函数)
for(var i=0;i<pics.length;i++){
pics[i].style.display="none";
dots[i].className="dott";
}
pics[index].style.display="block";
dots[index].className="active dott"
}
);
//给每个小圆点添加事件
for(var j=0;j<dots.length;j++){
dots[j].setAttribute("dotId",j);
addHandler(dots[j],"click",function(){
index=this.getAttribute("dotId");
for(var i=0;i<pics.length;i++){
pics[i].style.display="none";
dots[i].className="dott";
}
pics[index].style.display="block";
dots[index].className="active dott";}
)
};
// //添加定时器，实现轮播
function startAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=pics.length){
index=0
};
for(var i=0;i<pics.length;i++){
pics[i].style.display="none";
dots[i].className="dott";
}
pics[index].style.display="block";
dots[index].className="active dott";
},1000)
};
startAutoPlay();
//当鼠标移入界面，清除定时器
var bannerBox=byId("banner-box");
addHandler(bannerBox,"mouseover",function(){
clearInterval(timer);
});
//当鼠标离开时 开启定时器
addHandler(bannerBox,"mouseout",function(){
startAutoPlay(timer);
});
//给标题部分添加事件
var itemBox=byId("item-box");
var menuItems=itemBox.getElementsByClassName("menu-item");
var subMenu=byId("sub-menu");
var innerBox=subMenu.getElementsByClassName("inner-box");
// 给每一个一级标题都添加移入事件
for(var k=0;k<menuItems.length;k++){
menuItems[k].setAttribute("menuId",k);
addHandler(menuItems[k],"mouseover",function(){
//因为外盒子添加了隐藏，触发事件是会出现冲突，所以先把外盒子的隐藏去掉
subMenu.className="sub-menu";
index=this.getAttribute("menuId");
// //触发事件前先把样式隐藏，触发哪个事件显示哪个样式
for(var p=0;p<menuItems.length;p++){
menuItems[p].style.background="none";
innerBox[p].style.display="none";
}
menuItems[index].style.background="rgba(12, 12, 12, 0.4)";
innerBox[index].style.display="block";
})
}
//给每一个一级标题添加离开事件
for(var k=0;k<menuItems.length;k++){
menuItems[k].setAttribute("menuId",k);
addHandler(menuItems[k],"mouseout",function(){
//触发事件前先把样式隐藏，触发哪个事件显示哪个样式
index=this.getAttribute("menuId");
menuItems[index].style.background="none";
innerBox[index].style.display="none";
})
}
//鼠标移入子菜单，子菜单显示
addHandler(subMenu,"mouseover",function(){
this.className = "sub-menu";
});
//鼠标离开子菜单，子菜单消失
addHandler(subMenu,"mouseout",function(){
this.className = "sub-menu hide";
});18
收起
正在回答
2回答
同学你好，理解的没有问题，很棒！
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星