记录一个仿QQ下拉菜单的
为什么这么重视这个呢？因为我感觉这个和一些网站后台的导航菜单非常像.
第一步：先布局
结构代码：
<ul id="list">
<li>
<h2>我的好友</h2>
<ul>
<li>斜杠青年</li>
<li>晨间日记</li>
<li>阿珊</li>
</ul>
</li>
<li>
<h2>学校同学</h2>
<ul>
<li>背对疾风</li>
<li>情归酒肆</li>
<li>胡某人</li>
</ul>
</li>
<li>
<h2>朋友</h2>
<ul>
<li>司徒嫣然</li>
<li>我和阿瓜</li>
<li>观众</li>
</ul>
</li>
</ul>
第二步： 准备使用js代码实现功能
在写js代码之前首先对功能进行一下分析
默认去除昵称ul
功能1：点击分类<h2>，显示出朋友列表来。-- 通过自定义属性绑定<h2>,然后是因为每个h2对应着一个ul，所以可以通过h2的自定义属性找到ul
功能2：在点击分类，打开的同时，小三角变成朝下的。 --- 通过动态添加class实现。
功能3：点击朋友名称，高亮显示，并且点击下一个，上一个就不高亮显示了。
功能1/2实现：
<script type="text/javascript">
window.onload = function(){
//首先要找到要操作的元素
var oUl = document.getElementById("list");
var aH2 = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
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 = "none";
this.className = '';
}
}
}
}
</script>功能三：
要对<li>张三</li>进行操作，第一件事是找到 <li></li>
那要怎么去找呢？
要找到这些<li>，首先要先找到他们外层的<ul> ---- 循环
功能实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qq下拉菜单</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "宋体";
}
li{
list-style: none;
}
#list{
width: 200px;
height: auto;
margin: 0 auto;
border: 1px solid #000;
}
#list li h2{
width: 200px;
height: 35px;
line-height: 35px;
background-color: #f2f2f2;
background-image: url(img/left.png);
background-position: 5px center;
background-repeat: no-repeat;
text-indent: 15px;
}
#list li h2.active{
background-color: #269ABC;
background-image: url(img/up.png);
background-position: 5px center;
background-repeat: no-repeat;
}
#list li ul{
display: none;
}
#list li li{
width: 200px;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #000;
text-indent: 20px;
}
#list li li.hover{
background-color: #449D44;
}
</style>
<script type="text/javascript">
window.onload = function(){
//首先要找到要操作的元素
var oUl = document.getElementById("list");
var aH2 = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
var aLi = null;
var arrLi = [];
//循环给h2添加自定义属性，和点击事件
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 = "none";
this.className = '';
}
}
}
//找元素
for(var i=0;i<aH2.length;i++){
//现在找到的aLi又是一组元素的集合
aLi = aUl[i].getElementsByTagName('li');
for(var j=0;j<aLi.length;j++){
arrLi.push(aLi[j]);
}
}
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>
<body>
<ul id="list">
<li>
<h2>我的好友</h2>
<ul>
<li>斜杠青年</li>
<li>晨间日记</li>
<li>阿珊</li>
</ul>
</li>
<li>
<h2>学校同学</h2>
<ul>
<li>背对疾风</li>
<li>情归酒肆</li>
<li>胡某人</li>
</ul>
</li>
<li>
<h2>朋友</h2>
<ul>
<li>司徒嫣然</li>
<li>我和阿瓜</li>
<li>观众</li>
</ul>
</li>
</ul>
</body>
</html>
