JS基础——伸缩菜单2

最新推荐文章于 2024-06-28 16:31:39 发布

波克比520

最新推荐文章于 2024-06-28 16:31:39 发布

阅读量602

点赞数

分类专栏： javascript 文章标签： js 伸缩菜单

本文链接：https://blog.csdn.net/u011175410/article/details/40981927

版权

javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS——伸缩菜单2</title>
<style>
ul , h2 { padding:0; margin:0; }
li { list-style:none; }
#list { width:240px; border:1px solid #ccc; border-top:none; margin:0 auto; }
#list h2 { font-size:14px; border-top:1px solid #ccc; height:30px; line-height:30px; text-indent:20px; background:url(images/arr1.gif) no-repeat 5px center #eee; color:#000; cursor:pointer;}
#list .active { background:url(images/arr2.gif) no-repeat 5px center #ddd; color:#000; }
#list ul { display:none; }
#list ul li { line-height:24px; border-top:1px solid #ccc; text-indent:24px; }
#list ul .hover { background:#f4f4f4; }
</style>
<script>
window.onload = function(){
	
	var oUl = document.getElementById('list');
	var aH2 = oUl.getElementsByTagName('h2');
	var aUl = oUl.getElementsByTagName('ul');
	aLi = null;
	var arrLi = [];
	
	//点击伸缩
	for(var i = 0; i<aH2.length; i++){
		aH2[i].index = i;
		aH2[i].onclick = function(){
			if(this.className == ''){
				aUl[this.index].style.display = 'block';
				this.className = 'active';	
			}else{
				aUl[this.index].style.display = '';
				this.className = '';	
			}	
		};	
	}
	
	//二次循环生成所有子li，然后将生成的所有元素保存到数组中
	for(var i = 0; i<aUl.length; i++){
		aLi = aUl[i].getElementsByTagName('li');
		for(var j = 0; j<aLi.length; j++){
			arrLi.push(aLi[j]);	
		}	
	}
	
	//点击当前子li，改变颜色
	for(var i= 0; i<arrLi.length; i++){
		arrLi[i].onclick = function(){
			for(var i=0; i<arrLi.length; i++){
				arrLi[i].className = '';	
			}
			this.className = 'hover';
		}	
	}
		
};
</script>
</head>
<body>
<ul id="list">
    <li class="lis">
        <h2>我的好友</h2>
        <ul>
            <li>张三</li>
            <li>张三</li>
            <li>张三</li>
            <li>张三</li>
        </ul>
    </li>
    <li class="lis">
        <h2>企业好友</h2>
        <ul>
            <li>李四</li>
            <li>李四</li>
            <li>李四</li>
            <li>李四</li>
            <li>李四</li>
        </ul>
    </li>
    <li class="lis">
        <h2>黑名单</h2>
        <ul>
            <li>阿猫</li>
            <li>阿狗</li>
        </ul>
    </li>
</ul>


</body>
</html>

在之前的基础上，给子级的li添加背景色

其思路：

1.循环所有子级ul，然后获取当前ul下的所有li，并存放在变量aLi中，

2.循环所有aLi，然后将li push到数组arrLi中

3.循环所有的数组arrLi，然后为每个arrLi添加点击事件，接着来个for循环，清空所有arrLi的className，并给当前添加className