Javascript：style.display =“ none”不起作用，而style.display =“ visible”起作用
[英]Javascript: style.display=“none” not working whereas style.display=“visible” works
问题描述
我正在尝试为产品目录创建模态结构。 每当用户单击产品名称时，模态就会出现。
默认情况下， modal class具有display="none"
style.display="visible"; 通过调用show(id);函数在onclick上执行show(id);
单击close(X) icon hide(id); 被称为，但是style.display="none"; 没有效果，模态也不会隐藏。
请仅使用简单的Javascript回答。
代码： https ： //jsfiddle.net/abhaygc/zymkv1wq/
代码段：
function show(id) { var modal = document.getElementById(id); modal.style.display="block"; } function hide(id){ var close = document.getElementById(id); console.log("It's here."); close.style.display="none"; }
body{ height: 100vh; margin: 0px; overflow-y: scroll; } .header{ background-color: white; height:8%; overflow: hidden; font-style: "Roboto"; font-size: 25px; border-bottom: 2px solid; border-bottom-color: #cccccc; } #clear{ clear: both; } .logo{ margin-top: 12px; float: left; left: 0px; padding-right: 50px; } #logo:hover{ background: transparent; } .links{ display: block; float: right; margin-right: 10px; margin-top: 10px; } a{ position: relative; right: 0px; /*top: 25px;*/ padding-left: 10px; padding-right: 10px; color:black; letter-spacing: 2px; font-weight: 200; text-decoration: none; } a:hover{ background-color:#cccccc; } .content{ display: block; background-color: white; height: 92%; margin-top: 0px; font-family: 'Roboto'; } #clear{ clear: both; } .image{ display: block; cursor: pointer; width: 300px; height: 150px; background-color: #cccccc; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); overflow: hidden; } .product-1{ display: block; position: relative; padding-left: 20%; padding-right: 0%; margin-top: 5%; float: left; left: 0px; width: 50%; overflow: hidden; box-sizing: border-box; border-style: none; border-color: black; border-width: 1px; } .product-2{ display: block; position: relative; padding-left: 10%; padding-right: 0%; margin-top: 5%; float: right; right:0px; /* float: left; /*Q1 left: 25px; */ width: 50%; overflow: hidden; box-sizing: border-box; border-style: none; border-color: black; border-width: 1px; } .product-title{ display: block; text-align: center; margin-top: 50px; color:rgb(26, 115, 232); font-size: 50px; } .modal{ display: none; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1; background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.8); /* Black w/ opacity */ color:black; /*color:rgb(26, 115, 232);*/ width: 100%; height: 100%; } .modal-body{ display: block; position: relative; left: 35%; top: 10%; font-size: 45px; } .close{ display: block; cursor: pointer; float: right; right: 10px; font-size: 60px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <link rel="stylesheet" type="text/css" href="products.css"> <title>Products</title> </head> <body> <div class="header"> <div class="logo"> <a href="home.html"><img id="logo"src="logo.png" alt="LOGO"></a> </div> <div class="links"> <a href="home.html">Home</a> <a href="products.html">Products</a> <a href="login.html">Login</a> <a href="register.html">Register</a> <a href="home.html">Contact</a> <a href="home.html">About</a> </div> </div> <div class="content"> <div class="product-1 product" onclick="show('cns');"> <div class="image"> <span class="product-title">CNS</span> </div> <div id="cns" class="modal"> <div class="modal-head"> CNS <span class="close" onclick="hide('cns');">×</span> </div> <div class="modal-body"> <ol> <li>CNS First Product</li> <li>CNS Second Product</li> <li>CNS Third Product</li> <li>CNS Fourth Product</li> </ol> </div> </div> </div> <div class="product-2 product" onclick="show('laser');"> <div class="image"> <span class="product-title">Laser Cut</span> </div> <div id="laser" class="modal"> <div class="modal-head"> Laser Cut <span class="close" onclick="hide('laser');">×</span> </div> <div class="modal-body"> <ol> <li>Laser First Product</li> <li>Laser Second Product</li> <li>Laser Third Product</li> <li>Laser Fourth Product</li> </ol> </div> </div> </div> <div id="clear"></div> <div class="product-1 product" onclick="show('rubber');"> <div class="image"> <span class="product-title">Rubber roller</span> </div> <div id="rubber" class="modal"> <div class="modal-head"> Rubber roller <span class="close" onclick="hide('rubber');">×</span> </div> <div class="modal-body"> <ol> <li>Rubber First Product</li> <li>Rubber Second Product</li> <li>Rubber Third Product</li> <li>Rubber Fourth Product</li> </ol> </div> </div> </div> <div class="product-2 product" onclick="show('fixture');"> <div class="image"> <span class="product-title">Fixture</span> </div> <div id="fixture" class="modal"> <div class="modal-head"> Fixture <span class="close" onclick="hide('fixture');">×</span> </div> <div class="modal-body"> <ol> <li>Fixture First Product</li> <li>Fixture Second Product</li> <li>Fixture Third Product</li> <li>Fixture Fourth Product</li> </ol> </div> </div> </div> </div> </body> <script type="text/javascript" src="products.js"></script> </html>
2 个解决方案
解决方案1
1 已采纳 2018-08-19 16:06:16
这是由于event bubbling而event bubbling 。
这意味着，当您单击“ X”按钮时，将调用onclick="hide('cns')"并将display属性设置为none 。
然后事件冒泡到product元素，后者又调用其自己的onclick方法。 这导致模态再次出现。
您可以通过将当前onclick更改为来停止事件传播
onclick="hide('cns');event.stopPropagation()"
或者，您可以将模态移到product元素之外：
<div class="product-1 product" onclick="show('cns');">
<div class="image">
<span class="product-title">CNS</span>
</div>
</div>
<div id="cns" class="modal">
<div class="modal-head">
CNS
<span class="close" onclick="hide('cns');">×</span>
</div>
<div class="modal-body">
<ol>
<li>CNS First Product</li>
<li>CNS Second Product</li>
<li>CNS Third Product</li>
<li>CNS Fourth Product</li>
</ol>
</div>
</div>
要查看显示属性实际上已更改然后又更改回，您可以执行以下操作：
function hide(id) {
var close = document.getElementById(id);
close.style.display="none";
console.log(close.style.display);
setTimeout(() => {console.log(close.style.display);});
}
# would print:
"none"
"block"
解决方案2
1 2018-08-19 16:22:14
我已经在小提琴中更新了它，您可能需要检查一下： https : //jsfiddle.net/zymkv1wq/28/
关键在于这些行。
<div class="product-1 product" onclick="show('cns');">
<div class="image">
<span class="product-title">CNS</span>
</div>
<div id="cns" class="modal">
<div class="modal-head">
CNS
<span class="close" onclick="hide('cns');">×</span>
</div>
<div class="modal-body">
<ol>
<li>CNS First Product</li>
<li>CNS Second Product</li>
<li>CNS Third Product</li>
<li>CNS Fourth Product</li>
</ol>
</div>
</div>
</div>
你有看到？ 您将<div id="cns" class="modal">放在此div <div class="product-1 product" onclick="show('cns');">里面，其中具有onclick回调。
因此，基本上，当cms模态出现并单击关闭按钮时，您也会单击父div。 迫使它再次显示。 试试这个，我只更改cns ；
<div class="product-1 product">
<div class="image" onclick="show('cns');">
<span class="product-title">CNS</span>
</div>
<div id="cns" class="modal">
<div class="modal-head">
CNS
<span class="close" onclick="hide('cns');">×</span>
</div>
<div class="modal-body">
<ol>
<li>CNS First Product</li>
<li>CNS Second Product</li>
<li>CNS Third Product</li>
<li>CNS Fourth Product</li>
</ol>
</div>
</div>
</div>
注意show()现在在类image 。
如果要调试以前的代码，请尝试将console.log('something')放入JS文件的show()内。 当您打开模态并单击close按钮时，您也会从show()查看日志
style.display =“ none”在else {}中有效，但在if {}中无效
[英]style.display=“none” works in else{} but not in if{}
style.display = "none" 不适用于 IE，但适用于其他浏览器
[英]style.display = "none" is not working in IE but works in Other browser
Javascript style.display 不工作并被 css 覆盖？
[英]Javascript style.display not working and is overwritten by css?
JavaScript：元素style.display ='block'不起作用
[英]JavaScript: Element style.display = 'block' is not working
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
style.display =“none”无效
javascript style.display无法正常工作
JavaScript .style.display？
style.display =“ none”在else {}中有效，但在if {}中无效
“style.display = 'flex/none'” 不工作
style.display == “none” 无法正常工作
style.display = "none" 不适用于 IE，但适用于其他浏览器
Javascript style.display 不工作并被 css 覆盖？
JavaScript：元素style.display ='block'不起作用
Javascript style.display无法与表单一起使用
相关标签