小米导航列表栏问题

Question

小米导航列表栏,应该怎么用JS写出来,和小米官网那样的效果出来hoverli如果下面有子元素,那么就让他的高度变大,如果是第二次hoverli且有和第一次hover时li只能变内容,高度不能变如果li内没有其他的内容,那么就让前面hover出来的li收起来谢谢大家

Answer 1

昨晚在发布这个问题后,关了电脑后,突发奇想的手写一段JS代码,然后到今天下班了再小修小改了下,发现可以了

具体思路是通过在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;

}

}

如果您发现有问题,欢迎指出并指正,谢谢