鍍金池/ 問答/HTML/ 小米導航列表欄問題

小米導航列表欄問題

小米導航列表欄,應該怎么用JS寫出來,和小米官網那樣的效果出來
hoverli如果下面有子元素,那么就讓他的高度變大,如果是第二次hoverli且有和第一次hover時li只能變內容,高度不能變
如果li內沒有其他的內容,那么就讓前面hover出來的li收起來
謝謝大家

回答
編輯回答
清夢

昨晚在發(fā)布這個問題后,關了電腦后,突發(fā)奇想的手寫一段JS代碼,然后到今天下班了再小修小改了下,發(fā)現可以了
具體思路是通過在css里就把每一個li里的子元素高度設為目標高度,然后就用JS來操作,不寫每個li的移出事件,只寫移入事件`
下面是我的JS代碼
var oNav = document.getElementById("nav"),

oUl = oNav.getElementsByTagName("ul")[0],
aLi = oUl.children;

var onoff = true,num = 0;
for (var i = 0; i < aLi.length; i++) {

aLi[i].index = i;
aLi[i].onmouseenter = function(){
    if( aLi[this.index].getAttribute("class")==="fl conversion" ){
        if( onoff ){
            this.children[1].style.height = "0";
            this.children[1].style.display = "block";
            animate(aLi[this.index].children[1],"height",232,500);
            num = this.index;
            onoff = false;
        }else{
            aLi[num].children[1].style.display = "none";
            num  = this.index;
            aLi[num].children[1].style.display = "block";
        }
    }else{
        animate(aLi[num].children[1],"height",0,500);
        onoff = true;
    }
};
oUl.onmouseleave = function () {
    animate(aLi[num].children[1],"height",0,500);
    onoff = true;
}

}
如果您發(fā)現有問題,歡迎指出并指正,謝謝

2017年8月20日 07:31