《任务5 DOM操作-切换状态》任务产出汇总

<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,然后状态完成改变.