我的代码涉及在另一个 div 中有一个 div,当我将它们的可见性都设置为隐藏时,只有父 div 消失了。在一次调试尝试中,我尝试打印出子 div 的可见性,它具有“可见性:隐藏”。
#popup {
visibility: visible;
margin: auto;
position: fixed;
background-color: black;
padding-top: 5px;
padding-bottom: 5px;
padding-left: .5%;
padding-right: .5%;
border-radius: 4px;
left: 14.5%;
top: 20px;
width: 70%;
height: 450px;
}
#redX {
visibility: visible;
position: absolute;
right: 0px;
top: 0px;
width: 35px;
height: 35px;
text-align: center;
font-size: 25px;
font-weight: bold;
color: white;
background-color: red;
transition: .2s color ease-out;
}
------------------------------------------------
// how I control the styles in changePopupVisibility()
var popup = document.getElementById('popup');
var redX = document.getElementById('redX');
var popupOpen = true;
------------------------------------------------
// rX is a variable I use to paste redX in different functions.
var rX = "<div id='redX' onClick='changePopupVisibility()'>X</div><br>";
------------------------------------------------
// How I change visibility when the X has been clicked
function changePopupVisibility() {
popupOpen = !popupOpen;
if (popupOpen) {
redX.style.visibility = "visible";
popup.style.visibility = "visible";
}
else {
redX.style.visibility = "hidden";
popup.style.visibility = "hidden";
}
}
如果这有点令人困惑,我已经把我的意思的工作版本放在 my website 上.单击红色 X 一次,所有内容都会消失,但单击“左”字并重试,只有父项会消失。
谢谢。
最佳答案
您应该使用:display: none;
因为它使元素根本不显示并且对布局没有影响,而 visibility: hidden;
元素将不可见但仍占据布局中的空间。
阅读:
更具体地说:
关于javascript - 隐藏可见性的子 div 不会消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33465295/