javascript - 导航菜单的JS代码的一个小BUG不知道如何解决求指导3.10更新
本文介绍了javascript - 导航菜单的JS代码的一个小BUG不知道如何解决求指导3.10更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
本人新手做了一个导航菜单，到最后一步了，有一个小BUG，就是当鼠标移出导航时，导航菜单还会有一个被选中时设计的样式，按理说我已经设置了离开事件，使导航恢复静态页面的背景颜色，反反复复使用各种方法也没得到解决。更新部分：已加入CSS和HTML，因为是新手所以写的时候也感觉很笨拙的样子，之前自己在网上查找交互琢磨了半天，用一一对应的方法可以完美显示，但是感觉这个方法很笨重，所以一直琢磨这种循环的方法。mouseover部分就不说了，mouseout部分我在循环内写过比如listMore[i].onmouseout=function()包裹在i循环中，与j分开，【】内试了用J无效，会出现鼠标离开更多列表listmore的确会消失，但是单独从list离开即左边菜单列表就无效，一定要移动到右边再离开才行。也有尝试用if嵌套事件来判定移开到那部分判定，或者同时设定左右两部分||离开函数，不知道是我写法有问题还是什么也失败了。所以才重新定义了变量main,和右边大DIV right,分为内外两部分，内部循环和外部直接监听，之前的问题都解决了，就是小白框去不掉。这就是我的整个的思路，如果可以用if和||判定的话 也是最好了，希望是我的输入有问题导致的失败。望指教。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#main{width:1000px;background-color:red;height:1600px;margin-top:200px;}
#shopList{position:absolute;top:200px;left:10px;width:197px;height:100%;background-color:#DED5D5;}
#shopList a{width:157px;display: block;padding:20px;height:10px;}
.shopListRight{height:100%;width:800px;position:absolute;top:200px;left:207px;background-color:white;display:none;}
.shopListRight h4{margin:30px 20px;display:inline-block;color:black;font-weight:bold;}
.shopListRight a{margin:10px 20px;font-size:16px;}
</style>
<script type="text/javascript">
window.onload=function(){
var shopList=document.getElementById("shopList");// 类似天猫的菜单导航：左边的菜单
var list=document.getElementById("shopList").getElementsByTagName("a");// 左边的菜单下的a标签 男装女装化妆品等
var listMore=document.getElementsByName("listMore"); // 右边绝对定位的DIV
var main=document.getElementById("main");//包含左右两个DIV的大DIV
var right=document.getElementById("right");// 把所有绝对定位的DIV 包裹的大DIV
main.onmouseover=function(){
right.style.display="block";
};
for(var i=0;i<list.length;i++){
list[i].index=i;
list[i].onmouseover=function(){
for(var j=0; j < listMore.length; j++){
listMore[j].index=j;
listMore[j].style.display="none";
list[j].style.backgroundColor="#DED5D5";
};
listMore[this.index].style.display="block";
list[this.index].style.backgroundColor="white";
};
};
main.onmouseout=function(){
right.style.display="none";
list.style.backgroundColor="#DED5D5";//问题在这 我应该是设置了离开事件 背景为#DED5D5 但是鼠标移开还是会有一条白色的样式
};
};
</script>
<body>
<div id="main">
<div id="shopList">
<a href="#">女装</a>
<a href="#">男装</a>
<a href="#">零食</a>
<a href="#">电脑</a>
<a href="#">手机</a>
</div>
<div id="right">
<div class="shopListRight" name="listMore">
<div>
<h4>当季流行></h4><a href="#">2017春季新品</a>
<a href="#">2017春季特卖</a>
<a href="#">羽绒服</a>
<a href="#">连衣裙</a>
<a href="#">帽子</a><br/>
<a href="#">外套</a>
<a href="#">牛仔裤</a>
</div>
<div>
<h4>精选上装></h4><a href="#">风衣</a>
<a href="#">毛衣</a>
<a href="#">针织衫</a>
<a href="#">短外套</a>
<a href="#">小西服</a><br/>
<a href="#">衬衫</a>
</div>
<div>
<h4>女鞋></h4><a href="#">帆布鞋</a>
<a href="#">皮鞋</a>
<a href="#">白鞋</a>
<a href="#">黑鞋</a>
<a href="#">豆豆鞋</a><br/>
<a href="#">拖鞋</a>
<a href="#">时装鞋</a>
</div>
<div>
<h4>特色女装></h4> <a href="#">时尚气质套装</a>
<a href="#">休闲运动套装</a>
<a href="#">装精选妈妈</a>
<a href="#">妈装大码女装</a>
<a href="#">职业套装</a>
<a href="#">优雅旗袍</a>
<a href="#">唐装</a>
<a href="#">小码女装</a>
</div>
</div>
<div class="shopListRight" name="listMore">
<div>
<h4>当季流行></h4><a href="#">2017春季新品</a>
<a href="#">2017春季特卖</a>
<a href="#">羽绒服</a>
<a href="#">连衣裙</a>
<a href="#">帽子</a><br/>
<a href="#">外套</a>
<a href="#">牛仔裤</a>
</div>
<div>
<h4>男士外套></h4><a href="#">夹克</a>
<a href="#">毛衣</a>
<a href="#">针织衫</a>
<a href="#">棉衣</a>
<a href="#">小西服</a><br/>
<a href="#">马甲</a>
</div>
<div>
<h4>男士内搭></h4><a href="#">衬衫</a>
<a href="#">卫衣</a>
<a href="#">T恤</a>
<a href="#">打底衫</a>
<a href="#">背心</a><br/>
<a href="#">短袖</a>
<a href="#">POLO衫</a>
</div>
<div>
<h4>男士裤装></h4> <a href="#">牛仔裤</a>
<a href="#">休闲裤</a>
<a href="#">西裤</a>
<a href="#">小脚裤</a>
<a href="#">运动裤</a>
<a href="#">工装裤</a>
<a href="#">短裤</a>
<a href="#">9分裤</a>
</div>
</div>
<div class="shopListRight" name="listMore">
<div>
<h4>进口食品></h4><a href="#">进口零食</a>
<a href="#">进口巧克力</a>
<a href="#">进口饼干</a>
<a href="#">进口果干</a>
<a href="#">进口饮料</a><br/>
<a href="#">进口葡萄酒</a>
<a href="#">进口洋酒</a>
</div>
<div>
<h4>休闲零食></h4><a href="#">零食</a>
<a href="#">坚果</a>
<a href="#">饼干</a>
<a href="#">蛋糕</a>
<a href="#">红枣</a><br/>
<a href="#">巧克力</a>
</div>
<div>
<h4>酒类></h4><a href="#">啤酒</a>
<a href="#">白酒</a>
<a href="#">干红</a>
<a href="#">保健酒</a>
<a href="#">配制酒</a><br/>
<a href="#">葡萄酒</a>
<a href="#">黄酒</a>
</div>
<div>
<h4>茶叶></h4> <a href="#">大麦茶</a>
<a href="#">大红袍</a>
<a href="#">菊花茶</a>
<a href="#">红茶</a>
<a href="#">铁观音</a>
<a href="#">花茶</a>
<a href="#">西湖龙井</a>
<a href="#">柠檬片</a>
</div>
</div>
<div class="shopListRight" name="listMore">
<div>
<h4>电脑整机></h4><a href="#">戴尔</a>
<a href="#">方正</a>
<a href="#">联想</a>
<a href="#">外星人</a>
<a href="#">苹果</a><br/>
<a href="#">索尼</a>
<a href="#">华硕</a>
</div>
<div>
<h4>电脑组装></h4><a href="#">显示器</a>
<a href="#">显卡</a>
<a href="#">主机</a>
<a href="#">CPU</a>
<a href="#">硬盘</a><br/>
<a href="#">音响</a>
</div>
<div>
<h4>电脑外设></h4><a href="#">键盘</a>
<a href="#">机械键盘</a>
<a href="#">鼠标</a>
<a href="#">鼠标垫</a>
<a href="#">耳机</a><br/>
<a href="#">风扇</a>
</div>
</div>
<div class="shopListRight" name="listMore">
<div>
<h4>热门手机></h4><a href="#">小米</a>
<a href="#">ipone</a>
<a href="#">魅族</a>
<a href="#">荣耀</a>
<a href="#">乐视</a><br/>
<a href="#">oppo</a>
<a href="#">vivo</a>
</div>
<div>
<h4>特色手机></h4><a href="#">YunOS</a>
<a href="#">千元指纹</a>
<a href="#">大屏<a/>
<a href="#">自拍</a>
<a href="#">移动</a><br/>
<a href="#">联通</a>
</div>
<div>
<h4>智能数码></h4><a href="#">智能设备</a>
<a href="#">智能手表</a>
<a href="#">智能手环</a>
<a href="#">VR眼镜</a>
<a href="#">智能健康</a><br/>
<a href="#">智能摄像</a>
<a href="#">智能机器人</a>
</div>
</div>
</div>
</body>解决方案
为什么你mouseover事件绑定时list是带下标的，mouseout的时候没有带下标了
这篇关于javascript - 导航菜单的JS代码的一个小BUG不知道如何解决求指导3.10更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
