var bool = true; function listener3(event) { var event = event || window.event; var target = event.target || event.srcElement; if (target.className === 'show-hide') { var parent = target.parentElement; var adiv = parent.getElementsByClassName('a-div')[0]; if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true} var height = 90, changeH, opacity, id; if (bool) { changeH = 0; opacity = 0; target.innerHTML = '财经 -'; (function show() { if (changeH > height) {clearTimeout(id);return} changeH += 5; opacity += 0.06; //console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height); adiv.style.height = changeH + 'px'; adiv.style.opacity = opacity; adiv.style.display = 'block'; id = setTimeout(function () { clearTimeout(id); show(); }, 16.7); })(); bool = false; } else { changeH = height; opacity = 1; target.innerHTML = '财经 +'; (function hidden() { if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return} changeH -= 10; opacity -= 0.11; //console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height); adiv.style.height = changeH + 'px'; adiv.style.opacity = opacity; id = setTimeout(function () { clearTimeout(id); hidden(); }, 16.7); })(); bool = true; } } }
注意几点：
1.记得清除setTimeout的ID，然后退出，否则死循环，如if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return}
2.setTimeout的延迟时间设置为16.7是因为符合屏幕的刷新率60FPS，看着舒服
3.调试过程中，设置changeH和opacity的递增递减值时，记得打印出来，方便调试：
console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
4.最后，整个菜单的实现中，最关键的是下面这一句，如果没有这一句，你无法完美实现所有功能，比如：你点开一组子菜单，然后移动到其它组点击的时候，情况将有很大不同；而window.getComputedStyle用这个的原因是，首次打开时，点任意组的第一下都没反应，因为直接通过event.target在点第一下时是取不到opacity值的。
if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true};
不过，IE9以下不支持getComputedStyle方法，IE的Element对象有currentStyle属性；
如果你对CSS的处理不是很熟悉，看看我的总结：用原生JS读写CSS样式的方法总结
如果你想多了解setTimeout()方法的应用，看看这个：你真的知道setTimeout是如何运行的吗
对于事件的处理机制，可以看看这个：DOM中的事件处理概览与原理的全面剖析