隐藏可见性的子div没有消失答案

【问题标题】：Child div not disappearing with visibility hidden隐藏可见性的子div没有消失
【发布时间】：2016-02-01 14:36:52
【问题描述】：

我的代码涉及在另一个 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 一次，所有内容都会消失，但单击“left”一词再试一次，只有父项会消失。

谢谢。

【问题讨论】：

这不是解决方案，只是一个问题，由于代码是关闭时消失的模态形式，您是否没有考虑使用display:none而不是设置可见性？使用visibility:hidden，mdal 表单仍会在表单上占据空间，这可能是不希望的。
你也可以添加完整的html代码吗？
@MartinStaufcik 太完美了，它确实解决了问题。谢谢！

标签： javascript html css visibility

【解决方案1】：

您应该使用：display: none;，因为它使元素根本不显示并且对布局没有影响，而 visibility: hidden; 元素将不可见，但仍占用布局中的空间。

阅读：

CSS Visibility Property

更具体地说：

CSS Layout - The display property

【讨论】：

【解决方案2】：

您也可以尝试将不透明度标记为 0 和 1，而不是将可见性标记为隐藏和可见，并将其应用于父 div。使用 visibility 将保留尺寸，如果您想使用相同的尺寸，opacity 将反映与可见性相同的结果。

function changePopupVisibility() {
    popupOpen = !popupOpen;
    if (popupOpen) {
         popup.style.opacity= 1;
    }
    else {

        popup.style.opacity= 0;
    }
}

【讨论】：