小米导航列表栏问题

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(){&nbsp; &nbsp; if( aLi[this.index].getAttribute("class")==="fl conversion" ){&nbsp; &nbsp; &nbsp; &nbsp; if( onoff ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.children[1].style.height = "0";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.children[1].style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animate(aLi[this.index].children[1],"height",232,500);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; num = this.index;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onoff = false;&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aLi[num].children[1].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; num&nbsp; = this.index;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aLi[num].children[1].style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; animate(aLi[num].children[1],"height",0,500);&nbsp; &nbsp; &nbsp; &nbsp; onoff = true;&nbsp; &nbsp; }};oUl.onmouseleave = function () {&nbsp; &nbsp; animate(aLi[num].children[1],"height",0,500);&nbsp; &nbsp; onoff = true;}}如果您发现有问题,欢迎指出并指正,谢谢