一、js实现下拉菜单

二、代码：
1.html

<ul id="pBox"><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;}#pBox { 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'; } }}