给span添加的单击事件来控制ul的显示隐藏，效果只是一次性，第二次点击无效 ，为什么？

Question

var span=document.querySelector("#menu .icon-th-list");
var ul=document.querySelector("#menu>ul.nav");
var ul_display=getComputedStyle(ul).display;
span.addEventListener( 'click', 
function(){
if(ul_display=="block"){
ul.style.display="none";
span.style.left="40px";
}else{
span.style.left="250px";
ul.style.display="block";
}
}
)

Answer 1

因为var ul_display = getComputedStyle(ul).display;这句写在函数外相当于将ul最初的display状态存到变量，但后面都没改变它，所以ul_display这个值永远是ul最初的状态；将这句话放到事件函数内，这样每次点击的时候都会重新获取最新的值