HTML
<ul class="box"> <li> <span>我的好友</span> <div class="hidden"> <a href="javascript:;">我的好友1</a> <a href="javascript:;">我的好友2</a> <a href="javascript:;">我的好友3</a> <a href="javascript:;">我的好友4</a> </div> </li> <li> <span>我的同事</span> <div class="hidden"> <a href="javascript:;">我的同事1</a> <a href="javascript:;">我的同事2</a> <a href="javascript:;">我的同事3</a> <a href="javascript:;">我的同事4</a> <a href="javascript:;">我的同事5</a> <a href="javascript:;">我的同事6</a> <a href="javascript:;">我的同事7</a> </div> </li> <li> <span>黑名单</span> <div class="hidden"> <a href="javascript:;">黑名单1</a> <a href="javascript:;">黑名单2</a> </div> </li> </ul>
CSS
*{ margin: 0; padding: 0; } .box{ 290px; border: 1px solid #000; margin: 20px auto; } li{ list-style: none; } span, a{ display: block; padding: 10px 0 10px 30px; position: relative; cursor: pointer; } span:after{ position: absolute; content: ""; 0; height: 0; border-left: 10px solid #C0C4CB; border-top: 8px solid transparent; border-bottom: 8px solid transparent; left: 10px; top: 50%; margin-top: -8px; } a{ padding: 10px 0 10px 35px; color: #000; text-decoration: none; } a:before{ position: absolute; content: ""; 20px; height: 20px; background: orchid; border-radius: 50%; left: 10px; top: 50%; margin-top: -10px; } span:hover, a:hover{ background: #C4C4C4; } .act:after{ border-left: 10px solid #1F1F1F; } .act_show:after{ border-top: 10px solid #1F1F1F; border-left: 8px solid transparent; border-right: 8px solid transparent; } .act1{ background: #5C5C5C; color: #fff; } .hidden{ display: none; } .show{ display: block; }
JS
var aSpan=document.getElementsByTagName("span"); var aDiv=document.getElementsByTagName("div"); var list=document.getElementsByTagName("a"); for (var i=0;i<aSpan.length;i++) { aSpan[i].index=i; //鼠标移入:当好友列表隐藏时鼠标移入箭头颜色加深,否则箭头改为指向下的箭头 aSpan[i].onmouseover=function(){ if(aDiv[this.index].className=="hidden"){ this.className="act"; }else{ this.className="act_show"; } } //鼠标移出:当好友列表隐藏时鼠标移出箭头颜色保持原样,否则箭头还是为指向下的箭头 aSpan[i].onmouseout=function(){ if(aDiv[this.index].className=="hidden"){ this.className=""; }else{ this.className="act_show"; } } //鼠标点击好友列表展现 aSpan[i].onOff=true; aSpan[i].onclick=function(){ //先让所有的好友列表隐藏、所有的好友大标题保持原先的样式 for (var i=0;i<aSpan.length;i++) { aDiv[i].className="hidden"; aSpan[i].className=""; } if(this.onOff){ //箭头改为向下的 this.className="act_show"; //好友列表显示 aDiv[this.index].className="show"; this.onOff=false; }else{ //箭头颜色加深,鼠标移出恢复原貌 this.className="act"; //好友列表隐藏 aDiv[this.index].className="hidden"; //所有的开关改为真 for (var i=0;i<aSpan.length;i++) { aSpan[i].onOff=true; } //清除所有好友列表的焦点 for (var i=0;i<list.length;i++) { list[i].className=""; } } } } //好友列表点击获得焦点 for (var i=0;i<list.length;i++) { list[i].onclick=function(){ for (var i=0;i<list.length;i++) { list[i].className=""; } this.className="act1"; } }