Question

JS的onclick的事件，为什么要点2次才能触发

var spn=document.querySelector(".sp");

spn.onclick=function()
{
var hit=spn.parentNode.style.height;
if(hit=="50px")
{this.parentNode.style.height="300px";}
else
{this.parentNode.style.height="50px";}
}
以上是一个简单的绑定事件，问题有2个，1是在页面标签上需要点击第2次才能出现点击效果，为什么？第2个问题，是这句var hit=spn.parentNode.style.height;定义到函数外头就不能正常运行的原因？。。。

Answer 1

估计你的代码是这样的：你可以给div增加一个背景色,

如果父div没给他增加height，则spn.parentNode.style.height为空，所以，你可以给父div增加一个 <div style="height:50px"> 就可以了。 

 <div style=" background-color:green;  ">
        <div style=" background-color:red;width:20px; height:20px; " class="sp">11</div>
    </div>
    <script>

        var spn = document.querySelector(".sp");

        spn.onclick = function () {
            
            var hit = spn.parentNode.style.height;
           alert(hit);
            if (hit == "50px")
            {
                this.parentNode.style.height = "300px";
            }
            else
            {
                this.parentNode.style.height = "50px";
            }
        }

    </script>

var hit=spn.parentNode.style.height;定义到函数外头就不能正常运行的原因，涉及到JS的闭包，这个毕竟难解释，你可以自己查询一下“js闭包”

追问

为了不误导各网友，简单说下，这段代码本身有不妥的地方，首先获取高度的方法使用不当，注意是当，不是不对，因为这个hight方法确实可以使用，只是莫名奇妙的需要2次点击鼠标才能用，比较准确的是innerhight这个方法。不过强烈建议，不使用这个属性，本例子的效果只是个伸缩的菜单，很多方法可以实现的，上面提到的放在外面不能用的原因，我调试了下，这个方法在外边获取不到值的，，没法使用，跟闭包没关系