HTML+JS模擬實現(xiàn)QQ下拉菜單效果

第HTML+JS模擬實現(xiàn)QQ下拉菜單效果3、首次點擊某個具體的好友，只有當(dāng)前這個好友高亮

4、再次點擊這個好友時，高亮狀態(tài)就會消失

主要練習(xí)：js綁定事件

慢慢修改小細(xì)節(jié)：再次點擊，會折疊內(nèi)容時，里面的高亮要全部取消

實現(xiàn)代碼

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

margin:auto;

padding:0px

.content{

position:relative;

top:40px;

width:280px;

height:auto;

border:1pxsolidblack;

margin:0auto

span{

display:inline-block;

border-bottom:1pxdottedgrey;

width:100%;

background-color:red;

li{

padding-left:20px;

list-style:none;

ul{

display:none

/style

/head

body

div

div

divspan

imgsrc="右箭頭.png"alt=""我的好友

/span

lilili/li

lizhangsan/li

liuncle/li

/ul

/div

div

span

imgsrc="右箭頭.png"alt=""企業(yè)好友

/span

lilili/li

lizhangsan/li

liuncle/li

/ul

/div

divspan

imgsrc="右箭頭.png"alt=""黑名單

/span

lilili/li

lizhangsan/li

liuncle/li

liunle/li

liune/li

/ul

/div

/div

/div

script

//點擊分組，顏色改變，下面的選項出來

varcls=document.querySelectorAll('span')

varuls=document.querySelectorAll('ul')

for(i=0;icls.length;i++){

cls[i].addEventListener('click',function(){

if(this.flag==0){

this.style.backgroundColor='skyblue'

this.children[0].src='實向下箭頭-01.png'

console.log(uls[this.index]);

uls[this.index].style.display='block'

this.flag=1

}elseif(this.flag==1){

this.style.backgroundColor='red'

this.children[0].src='右箭頭.png'

console.log(uls[this.index]);

uls[this.index].style.display='none'

this.flag=0

//需要把li全部取消高亮

for(j=0;juls.length;j++){

for(m=0;muls[j].children.length;m++){

uls[j].children[m].style.backgroundColor='white'

uls[j].children[m].states=0

cls[i].index=i//通過添加一個屬性，進(jìn)行索引

cls[i].flag=0

for(i=0;iuls.length;i++){//利用事件冒泡對具體好友綁定點擊事件

uls[i].addEventListener('click',function(e){

console.log(e.target);

console.log(e.target.states);

if(e.target.states==0){

//this.style.backgroundColor='pink'//不能用this，這里的this指向的是uls[i]

e.target.style.backgroundColor='pink'

e.target.states=1

}elseif(e.target.states==1){

//this.style.backgroundColor='pink'//不能用this，這里的this指向的是uls[i]

e.target.style.backgroundColor='white'

e.target.states=0

console.log(uls[i].children.length);

for(j=0;juls[i].children.length;j++){

uls[i].children[j].states=0

///關(guān)鍵在于第二次重復(fù)點擊

/script

/body

/html

需要加索引時，一般說通過