导航菜单的JS代码的一个小BUG不知道如何解决求指导3.10更新

飞奔的益达
  • 20

本人新手做了一个导航菜单,到最后一步了,有一个小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>
回复
阅读 1.9k
5 个回答

为什么你mouseover事件绑定时list是带下标的,mouseout的时候没有带下标了

你都是循环设置的mouseover,也应该循环设置mouseout;不过你这个总体写法很有问题

不贴出html和css这种问题不好解答,不过仅仅针对这段代码题主应该了解下js操作dom时候做缓存,还有事件委托一些概念

main._index = this.index; // list[i].onmouseover 里面 放 这 代码 获取 当前 元素 的 下标 保存 main._index 中
list[this._index].style.backgroundColor = "#DED5D5"; // 鼠标 移开的  位置 main.onmouseout 里面 放 这 代码

问题的本质还是太不伦不类了 貌似是我异想天开了内外两层函数的概念了.... 有始有终吧,相比于一一对应或者className追加样式来说...我还是比较喜欢这种方式吧..代码如下.. 还是比较笨重,不敢乱改简略....留给需要的同学吧。

<script type="text/javascript">

  window.onload=function(){
  var list=document.getElementById("shopList").getElementsByTagName("a");// 左边的菜单下的a标签  男装女装化妆品等
  var listMore=document.getElementsByName("listMore");  // 右边绝对定位的DIV
          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[this.index].style.display="none";
                    list[this.index].style.backgroundColor="#DED5D5";       //每次鼠标滑过后返回默认样式
                 };
                   listMore[this.index].style.display="block";               
                   list[this.index].style.backgroundColor="white";      //鼠标滑过的样式
                 }
           list[i].onmouseout=function(){
              for(var j=0; j < listMore.length; j++){
                    listMore[j].index=j;
                    listMore[this.index].style.display="none";                    //鼠标离开的样式即默认样式
                    list[this.index].style.backgroundColor="#DED5D5";
           } 
           }     
          listMore[i].onmouseover=function(){
              this.style.display="block"                               //鼠标滑过更多内容时的样式
              list[this.index].style.backgroundColor="white" ;
          }
          listMore[i].onmouseout=function(){
            this.style.display="none";
            list[this.index].style.backgroundColor="#DED5D5";          //鼠标离开更多内容时的样式
          }  
   } 

}

宣传栏