js 实现下拉菜单 完整代码

一、js实现下拉菜单

二、代码：
1.html

<ul id="divBox">
        <li class="myLi" onclick="openS(this,0)">
                    <span class="iconfont icon-maobi front"></span>            
                    <span class="font">Diseno web</span>            
                    <span class="iconfont icon-jiantouxiangxia back"></span>            
                    <ul class="myUl">
                         <li>Photoshop</li>
                          <li>Html</li> 
                          <li>css</li>                
                          <li>Photoshop</li>            
                    </ul>        
         </li>        
        <li class="myLi" onclick="openS(this,1)">            
                  <span class="iconfont icon-maobi front"></span>            
                  <span class="font">Diseno web</span>            
                  <span class="iconfont icon-jiantouxiangxia back"></span>           
                  <ul class="myUl">                
                  <li>Javascript</li>               
                  <li>JQuery</li>              
                  <li>Framework</li>           
                  </ul>     
        </li>    
        <li class="myLi" onclick="openS(this,2)">        
                 <span class="iconfont icon-maobi front"></span>       
                 <span class="font">Diseno web</span>           
                  <span class="iconfont icon-jiantouxiangxia back"></span>   
                   <ul class="myUl">            
                         <li>Photoshop</li>             
                          <li>Html</li>        
                          <li>css</li>      
                          <li>Photoshop</li> 
                    </ul>    
     </li> 
       <li class="myLi" onclick="openS(this,3)">     
              <span class="iconfont icon-maobi front"></span>    
              <span class="font">Diseno web</span>           
              <span class="iconfont icon-jiantouxiangxia back"></span>        
              <ul class="myUl">               
                     <li>Photoshop</li>             
                     <li>Html</li>              
                     <li>css</li>               
                     <li>Photoshop</li>        
               </ul>       
       </li>
    </ul>

2.css

* { 
       margin: 0;    padding: 0;}
body { 
       background-color: slategray;}
#divBox { 
       width: 300px;    height: 800px;    margin: 0 auto;}
li { 
       width: 300px;    /* height: 50px; */    list-style: none;    line-height: 50px;    outline: hotpink 1px solid;    background-color: snow;    cursor: pointer;}
.front { 
       color: gray;    font-size: 20px;}
.back { 
       color: grey;    font-size: 20px;    padding-left: 150px;}
.font { 
   }
.myUl { 
       width: 300px;    /* height: 200px; */    display: none;    transition: all 0.5s linear;}
.myUl>li { 
       background-color: khaki;}
.myUl>li:hover { 
       background-color: lawngreen;}

/* @keyframes transf { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(20deg); }} */

3.js

let myUl = document.getElementsByClassName('myUl');
let myLi = document.getElementsByClassName('myLi');
let back = document.getElementsByClassName('back')
console.log(myUl)console.log(myLi)
function openS(obj, num) { 
           
if (myUl[num].style.display === 'none' || myUl[num].style.display === '') { 
           
myUl[num].style.display = 'block';        
// back[num].style.animation = 'transf 0.5s linear forwards' 
console.log(back[num].style)    
} else { 
           myUl[num].style.display = 'none';       
 // back[num].style.animation = '' }

    //判断是否为当前点击的，不是则不展开 
    for (let i = 0; i < myLi.length; i++) { 
           
    if (myLi[i] !== obj) { 
              
     myUl[i].style.display = 'none';       
      } 
         }
         }

今天的文章js 实现下拉菜单 完整代码分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。