js实现简单的下拉折叠菜单

那就可爱多一点点

于 2018-10-03 19:52:40 发布

阅读量3.2k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37241934/article/details/82933466

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js实现简单的下拉折叠菜单</title>
<style>
* {margin:0px; padding:0px;}
#div1 {width:200px; margin:0 auto; line-height:25px;}
ul {list-style:none;}
li {background:#ccc;margin-bottom:3px;}
dl {background:#eee; display:none;}
.active {background:#F90;}
</style>
<script>
//此处编写js代码，实现简单的下拉折叠菜单，默认菜单1是展开的，如果能实现子菜单动画展开，更好
window.onload=function (){
				var odiv=document.getElementById('div1');
				var ali=odiv.getElementsByTagName('li');
				var adl=odiv.getElementsByTagName('dl');
				
				
				for(var i=0;i<ali.length;i++){			
					
					ali[i].index=i;			
					ali[i].onclick=function (){
						
						for(var i=0;i<ali.length;i++){	
							ali[i].className='';
							adl[i].style.display='none';
						}
						this.className='active';
						adl[this.index].style.display='block';
					}
				}
			}


</script>
</head>

<body>
<div id="div1">
    <ul id="menu">
        <li class="active">菜单1</li>
            <dl style="display:block;">
                <dd>菜单1.1</dd>
                <dd>菜单1.2</dd>
                <dd>菜单1.3</dd>
                <dd>菜单1.4</dd>
            </dl>
        <li>菜单2</li>
            <dl>
                <dd>菜单2.1</dd>
                <dd>菜单2.2</dd>
                <dd>菜单2.3</dd>
                <dd>菜单2.4</dd>
            </dl>
        <li>菜单3</li>
            <dl>
                <dd>菜单3.1</dd>
                <dd>菜单3.2</dd>
                <dd>菜单3.3</dd>
                <dd>菜单3.4</dd>
            </dl>
    </ul>
</div>
</body>
</html>