javascript - 请问为什么我点击两次才能弹出第二个div框？
本文介绍了javascript - 请问为什么我点击两次才能弹出第二个div框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#y{
width: 100px;
height: 100px;
background: red;
}
#e{
width: 300px;
height: 300px;
background: gray;
display: none;
}
</style>
<script>
window.onload=function(){
var oY = document.getElementById('y');
var oE = document.getElementById('e');
oY.onclick=function(){
if(oE.style.display=="none"){
oE.style.display="block";
}
else{
oE.style.display="none";
}
}
}
</script>
</head>
<body>
<div id="y"></div>
<div id="e"></div>
</body>
</html>发现写在内联样式里面就能点击一次就有效。写在上面就第一次就要点击两次， 然后或者把none和block换一下，第一次就有效。这是为什么请问。
解决方案
因为你判断语句oE.style.display=="none"判断的是行内样式。第一次点击的时候，行内样式找不到display。所以执行了
else{
oE.style.display="none";
}在行内添加了display="none"，这样下次点击的时候就找到了display="none"，才执行
if(oE.style.display=="none"){
oE.style.display="block";
}采用下面 樊思雨 的方法比较好，或者用jq的 toggle
这篇关于javascript - 请问为什么我点击两次才能弹出第二个div框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
