仿京东左侧菜单 hover效果-简易demo

开发者硕阳技术 2022年11月7日

0 收藏 784 点赞 975 浏览 1524 个字

简单描述：用到的知识点 css 中的绝对定位以及 Js 中的事件冒泡（或事件委托）

   .cont{display:inline-block;width:200px;height:200px;border:1px solid red;position:absolute;left:150px;top:2px;display:none;}

 <div style="border:1px solid green;margin:30px auto;width:150px;" id="menu">             <div class="item" id="div1" style="position:relative;">
                 <span style="display:inline-block;background: #abcdef;width:150px;height:50px;cursor:pointer;">123</span>
                 <span id="span1"  class="cont">
                      hello1111111
                      hello1111111
                      hello1111111
                      hello1111111
                      hello1111111
                 </span>
             </div>             <div id="div2" class="item" style="position:relative;">
                 <span style="display:inline-block;background: red;width:150px;height:50px;cursor:pointer;">123</span>
                 <span class="cont">hello222222</span>
             </div>             <div id="div3" class="item" style="position:relative;">
                 <span style="display:inline-block;background: green;width:150px;height:50px;cursor:pointer;">123</span>
                 <span class="cont">hello333333</span>
             </div>          </div>

  window.onload = function(){
              var oSpan1 = document.getElementById("span1");
              var oMenu = document.getElementById("menu");
              var oSMenu = oMenu.childNodes;              for(var n=oSMenu.length-1; n>=0; n--){
                   if(oSMenu[n].className == "item"){
                       oSMenu[n].onmouseover = function(evt){
                             var target = oTargetByClass._get_target_child(this.childNodes, "cont");
                             target.style.display = "block";
                       }                        oSMenu[n].onmouseout = function(evt){
                             var target = oTargetByClass._get_target_child(this.childNodes, "cont");
                             target.style.display = "none";
                      }
                   }
              }               var oTargetByClass = {                  _get_target_child: function(childNodes, child_class){
                     for(var i = childNodes.length-1; i>=0; i--){
                         if(childNodes[i].className == child_class){
                              return childNodes[i];
                         }
                     }
                  }
              }
          }