老师，主菜单的背景色怎么消失？当滑出主菜单时，背景色没有消失

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

来源：5-4 二级菜单的展开与收起

Leeluo

2019-04-21 17:38:37

// 封装一个代替getElementById()的函数方法

function byId(id){

return typeof(id)==="string"?document.getElementById(id):id;

}

// function byid(id){

// if(typeof(id)==="string"){

// return document.getElementById(id);

// }else{

// return id;

// }

// 全局变量

var index=0;

var timer=null;

var pics=byId("banner").getElementsByTagName("div");

var len=pics.length;

var dots=byId("dots").getElementsByTagName("span");

var prev=byId("prev");

var next=byId("next");

var menu=byId("menu-content")

var menuItems=menu.getElementsByTagName("div");

var subMenu=byId("sub-menu");

var innerBox=subMenu.getElementsByClassName("inner-box");

function slideImg(){

var main=byId("main");

// 鼠标滑过暂停清除定时器

main.onmouseover=function(){

if(timer) clearInterval(timer);

}

// 鼠标滑出继续

main.onmouseout=function(){

timer=setInterval(function(){

index++;

if(index>=len){

index=0;

}

// 切换图片

changeImg()

},2000);

}

// 自动在main上触发鼠标滑出时间

// main.onmouseout()

// 遍历所有的圆点，绑定点击事件

for(var d=0;d<len;d++){

dots[d].id=d;

dots[d].onclick=function(){

// 让切换图片用的index等于span的ID值（即用ID值代替了索引值）

index=this.id;

// 调用切换图片函数

changeImg();

}

// 上一张按钮

prev.onclick=function(){

index--;

if(index<0){

index=len-1;

}

changeImg();

}

// 下一张按钮

next.onclick=function(){

index++;

if(index>=len){

index=0;

}

changeImg();

}

// 导航菜单

// 遍历主菜单且绑定点击事件

for(var m=0;m<menuItems.length;m++){

// 每一个menu-item定义data-index,作为索引

menuItems[m].setAttribute("data-index",m);

menuItems[m].onmouseover = function(){

// subs[m].style.display="block";

for(var j=0;j<innerBox.length;j++){

innerBox[j].style.display="none"

menuItems[j].style.background="none"

}

var idx=this.getAttribute("data-index");

subMenu.className="sub-menu";

innerBox[idx].style.display="block";

menuItems[idx].style.background="rgba(0,0,0,0.1)"

// console.log(idx)

// alert("hello")

}

// 滑出主菜单子菜单隐藏

menu.onmouseout=function(){

subMenu.className="sub-menu hide"

}

// 滑过子菜单时，子菜单显示

subMenu.onmouseover=function(){

this.className="sub-menu"

}

// 滑出子菜单时，子菜单隐藏

subMenu.onmouseout=function(){

this.className="sub-menu hide"

}

// 主分类菜单选中状态

// 滑出主分类菜单，背景色消失

menuItems[m].onmouseout=function(){

this.style.background="none"

}

slideImg();

// 切换图片方法

function changeImg(){

// 遍历banner下所有的div设置隐藏；遍历dots所有的span清除类

for(var i=0;i<len;i++){

pics[i].style.display="none";

dots[i].className="none";

}

// pics[index].className="slide-active";

// 根据index索引找到当前的div设为显示;找到当前的span设为显示

pics[index].style.display="block";

dots[index].className="active";

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</a>

</a>

</div>

</div>

</body>

</html>

写回答

1回答

樱桃小胖子

2019-04-21

这里还需要css样式联调哦，因此建议同学将css代码上传一下哦

祝学习愉快！

0 学习 · 36712 问题

查看课程

相似问题

背景图片和背景颜色同时设置时，背景图片会覆盖背景颜色

回答 2

背景色清除问题

回答 1

老师，主菜单的背景色怎么消失？当滑出主菜单时，背景色没有消失

回答 2

老师，按钮下一张，上一张无法切换图？还有子菜单背景不显示？怎么回事啊？

回答 2

求助：为什么最后改变背景颜色这一步不能在css里加hover呢？

回答 1

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