给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最初的状态；

将这句话放到事件函数内，这样每次点击的时候都会重新获取最新的值