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

最新推荐文章于 2022-05-09 13:42:13 发布

weixin_38626168

最新推荐文章于 2022-05-09 13:42:13 发布

阅读量652

点赞数

分类专栏： web前端文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_38626168/article/details/72904511

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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;
}