今天记一个动态下拉菜单的实现.

html部分

  
        
      
    
    
     
      
      
        
涂山
        
       
          
        
红红
          
        
雅雅
          
        
苏苏
          
        
容容
        
       
      
      
      
        
四大天王
        
       
          
        
东邪
          
        
西毒
          
        
南帝
          
        
北丐
        
       
      
    
     
  
    
  复制代码

css部分

//清除默认格式*{  list-style:none;  padding: 0;  margin: 0;}//清除浮动定位带来的八阿哥.clearfix::after{  content:'';  display: block;  clear: both;}//好兄弟,肩并肩div > ul > li{  float: left;  position: relative;}//兄弟之间也是有距离的.list{  margin: 0 10px  ;}//下拉菜单默认不出现.select{  display: none;  position: absolute;  left: 0;  border: 1px solid pink;  border-radius: 4px;}//增加类,让菜单出现div > ul > li.active .select{  display: block;  animation: lefttoright 1s;}//防止文字换行.select > li{  white-space: nowrap;  margin: 8px 8px 8px 0px;}//动态效果@keyframes lefttoright{  from{    margin-left:100%;   }  to{    margin-left: 0;  }}复制代码

js部分

let pTags = document.querySelectorAll('div > ul > li');    for (let i = 0; i < pTags.length; i++) {            pTags[i].onmouseenter = function (x) {                x.currentTarget.classList.add('active')            }            pTags[i].onmouseleave = function (x) {                x.currentTarget.classList.remove('active')             }        }复制代码

pTags 存着该选择器下的两个<li>节点,鼠标移动到该节点上就为该节点增加类'active'来更改选择器.鼠标离开时则移除该类名.