javascript - 子div没有消失,隐藏的可见性

标签 javascript html css visibility

我的代码涉及在另一个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;的元素将是不可见的,但仍占据布局中的空间。

读:

CSS Visibility Property

更具体地说:

CSS Layout - The display property

关于javascript - 子div没有消失,隐藏的可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33465295/

相关文章:

javascript - 如何使用 onclick 将视频加载到带有 javascript 的 HTML5 页面中

Jquery在搜索框外单击时隐藏搜索框

jquery - 如何添加缩放效果以查看表格文本详细信息

css - 以 Logo 为中心的响应式导航菜单

javascript - 更好的缓存以消除帧丢失

javascript - 如何在 jQuery 中检测文本输入框中的变化

javascript - CSS HTML : Text Wraps in Chome: Works fine in Firefox and IE

css - 如何将自定义 CSS 分配给 Sharepoint 站点

javascript - Javascript:jQuery方法中对象的this.var

javascript - 如何渲染 react 组件