javascript下拉菜单代码(用jquery做下拉菜单)

大家好，又见面了，我是你们的朋友全栈君。

一、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';       
} 
}
}