<h1>QQ面板切换效果</h1>
div如下
Screenshot from 2017-04-04 21-09-25.png
<div class="bottomDiv">
<div class="btn" style="float: left"></div>
<div>
<div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
<div id="loginStateShow" class="login-state-show online">状态</div>
<div class="login-state-down">下</div>
<div class="login-state-txt" id="login2qq_state_txt">在线</div>
<ul id="loginStatePanel" class="statePanel login-state" style="display: none">
<li id="online" class="statePanel_li">
<div class="stateSelect_icon online"></div>
<div class="stateSelect_text">我在线上</div>
</li>
<li id="callme" class="statePanel_li">
<div class="stateSelect_icon callme"></div>
<div class="stateSelect_text">Q我吧</div>
</li>
<li id="away" class="statePanel_li">
<div class="stateSelect_icon away"></div>
<div class="stateSelect_text">离开</div>
</li>
<li id="busy" class="statePanel_li">
<div class="stateSelect_icon busy"></div>
<div class="stateSelect_text">忙碌</div>
</li>
<li id="silent" class="statePanel_li">
<div class="stateSelect_icon silent"></div>
<div class="stateSelect_text">请勿打扰</div>
</li>
<li id="hidden" class="statePanel_li">
<div class="stateSelect_icon hidden"></div>
<div class="stateSelect_text">隐身</div>
</li>
</ul>
</div>
</div>
</div>
</div>
观察这个div,我们在这个状态列表里面给每个li状态都定义了一个id,当我们点下"在线"时,就会在id为loginStateshow中把他的class变成online,其他状态以此类推.我知道你可能还没有明白,现在我们看看js代码吧.
首先我们要给loginStateshow绑一个事件,所以先获取他的id,
var login State=document.getElementById('loginState')
接下来事这个ul,我们开始让这个ul隐藏,点击的时候出来.所以也要获取他的id,
stateList=document.getElementById('loginStatePanel'),
这个列表取出来以后,我们鼠标划过列表的时候,还有点击的时候,都是在li上操作,所以li也要被取出来.
lis=stateList.getElementsByTagName('li'),
当我们选择状态的时候的时候,我们点击选择他,然后显示的状态应该是他的文字显示,比如'忙碌',所以我们也要得到他的状态文本的id
stateTxt=document.getElementById('login2qq_state_txt'),
看起来该获取的id也都的到了,现在我们来看看事件
首先是鼠标点击将整个ul显示出来
loginState.onclick=function(e){
e = e || window.event;
//
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}//阻止事件冒泡
stateList.style.display='block';
}
接下来鼠标划过,点击,离开的事件
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover=function(){
this.style.background='#567';
}//鼠标划过事件,背景变灰
lis[i].onmouseout=function(){
this.style.background='#FFF';
}//鼠标厉害事件,背景变白
lis[i].onclick=function(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}//我们在点击的时候要组织事件冒泡.
//鼠标点击事件,事件是把选中的li里面的文本得到,放到显示的div中,点击之后面板还要隐藏.
是因为你点div的时候让他显示列表,点li的时候又让他隐藏,可是你点击li的时候事件就会冒泡到ul,就会冒泡到div,所以就不会隐藏.
var id=this.id;
//将点击的id取出来
stateList.style.display='none';
//点击之后隐藏列表 stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
//改变内容
改变内容的时候还得把选中的classname给显示的面板div
loginStateShow.className='';
loginStateShow.className='login-state-show '+id;
}
}
之后我们需要的功能是,在点开列表的情况下,我们在点击空白处的时候隐藏列表,就需要在document上帮一个事件
document.onclick=function(){
stateList.style.display='none';
}
}
最后我们来总结一下:
首先,在没有操作的时候我们需要列表时隐藏的,我们选择点击的时候显示ul,鼠标划过的时候放到背景颜色改变,将文本内容放到显示的div,然后状态完成改变.
