js实现小特效下拉菜单的折叠

xiaoxiao2021-02-28 94

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>展开菜单</title> <link rel="stylesheet" type="text/css" href="张开菜单.css"> <script type="text/javascript" src="zhankaicaidan.js"></script> </head> <body> <ul id="menu"> <div id="list" >播放列表<span class="spanDown" id='spanId'></span></div> <li class="lc1"><a href="#">玩爱之徒-蔡依林</a></li> <li class="lc1"><a href="#">原谅我就是这样的女王</a></li> <li class="lc1"><a href="#">猜不透-叮当</a></li> <li class="lc1"><a href="#">自导自演-周杰伦</a></li> <li class="lc1"><a href="#">浪漫窝-弦子</a></li> <li class="lc1"><a href="#">流年-王菲</a></li> </ul> </body>

</html>

'use strict'; // alert("ha"); window.οnlοad=function () { var oLi=document.getElementById('list'); var oSpan=document.getElementsByClassName('spanDown')[0]; var o=document.getElementById('menu'); // console.log(oUlLi[0].className); // console.log(oUlLi[4].className); var i=0; oLi.οnclick=function () { if(oSpan.className=='spanUp') { var oUlLi=document.getElementsByClassName('lc2'); console.log(oUlLi.length); console.log("chandu:"+oUlLi.length); // console.log("chandu:"+oUlLi.length); oSpan.className='spanDown'; o.id='menu'; // alert(oUlLi.length); for(i=0;i<6;i++) { // console.log(oUlLi.length); // if(oUlLi.length>0) oUlLi[0].className='lc1'; } } else { var oUlLi=document.getElementsByClassName('lc1'); console.log(oUlLi.length); oSpan.className='spanUp'; o.id='menu1'; // alert(oUlLi.length); for(i=0;i<6;i++) { // oUlLi[0].className=''; oUlLi[0].className='lc2'; console.log('ha'); } } } }

#menu { margin: 40px auto; background-color: #e9edf2; list-style: none; width: 200px; padding-left: 0; height: 175px; color: #57646e; position: relative; } #menu1 { margin: 40px auto; background-color: white; list-style: none; width: 200px; padding-left: 0; height: 175px; color: #57646e; position: relative; } #list { /* background-color: ; */ background-color: #dee3e6; } .spanDown { background-image:url(img/up.gif); background-repeat: no-repeat; width: 10px; height: 5px; position: absolute; left:150px; top: 10px; } .spanUp { background-image:url(img/down.gif); background-repeat: no-repeat; width: 10px; height: 5px; position: absolute; left:150px; top: 10px; /* top: px; */ /* background-color: red; */ } /* .spanUp img { background-image: url(img/down_list_h2_bg.gif); background-repeat: no-repeat; width: 10px; height: 5px; position: relative; left: 100px; } */ ul li,ul div { /* position: absolute; */ height: 25px; /* margin:auto 0; */ /* background-color: red; */ /* width: 200px; */ /* padding-left: 0; */ /* background-color: red; */ } ul li a { text-decoration: none; } ul .lc1:hover {background-color: white; text-decoration: underline; } .lc2 { display: none; background-color: white; }

转载请注明原文地址: https://www.6miu.com/read-62245.html

技术

最新回复(0)

js实现小特效 下拉菜单的折叠

技术

js实现小特效下拉菜单的折叠