JS之模拟QQ列表展示

最新推荐文章于 2021-06-05 00:05:40 发布

cookielv

最新推荐文章于 2021-06-05 00:05:40 发布

阅读量1.5k

点赞数 2

分类专栏：自学第一课

本文链接：https://blog.csdn.net/qq_19004625/article/details/53678330

版权

自学第一课专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近学了点CS布局和JS，总是迫不及待的想写点小实例。

跟着妙味课堂学了一下模拟 QQ列表的简单功能展示，自己也敲了一遍代码。

页面布局如下：

	<ul id="list">
			<li class='lis'>
			<ul>
				<h2>家人</h2>
				<li>爸爸</li>
				<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>
				<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>
	</ul>

CSS布局：

<style>
			ul,h2 { padding:0; margin:0; }
			li { list-style:none; }
			#list { width:240px; border:1px solid #333; margin:0 auto; }
			#list .lis {}
			#list h2 { height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; }
			#list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }
			#list ul { display:none; }
			#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }
			#list ul .hover{ background:orange; }
		</style>

JS代码如下：

  var oUl = document.getElementById('list');
   var aH2 = oUl.getElementsByTagName('h2');
  var aUl = oUl.getElementsByTagName('ul');
     for(i=0;i<aH2.length;i++){
       	aH2[i].index=i;
       	aH2[i].οnclick=function(){
       			if(this.className==''){
       				aUl[this.index].style.display='block';
       				this.className='active';
       			}
       			else{
       				aUl[this.index].style.display='none';
       				this.className='';
       			}
       	}       	                                  
       }