如何切换div的显示状态而不是可见性

Question

当某个语句为真时，我正在尝试切换div的存在。

我正在使用以下JavaScript / AJAX的ATM：

   function checkSession() {
    $.ajax({
            url:  '/dev/php/checkSession.php',
            type: 'POST',
            error: function(ja){
                console.log(ja);
            },      
            success: function(response) {
                if(response == "")
                {
                var elem = document.getElementById("liitem");
                elem.innerHTML = "Inloggen";
                var elem2 = document.getElementById("aanmelden");
                elem2.style.visibility = 'visible';
                }

            else {
                sessionmaybe = response;
                var elem = document.getElementById("liitem");
                elem.innerHTML = 'Uitloggen';
                var elem2 = document.getElementById("aanmelden");
                elem2.style.visibility = 'hidden';
            }
            }
        })
}

问题是，当我调整窗口大小时，div仍然具有样式。

多亏了浮动，菜单通常会放在徽标旁边。

有没有办法切换div的样式？

Answer 1

使用style.display= "none" ，给定visibilty将隐藏该元素并保留DOM元素将要保留的空间，这与display:none不同，它将从DOM中删除

从MDN

隐

该框是不可见的（完全透明，未绘制任何内容），但仍会影响布局。 如果元素的后代具有可见性，则将可见：visible（在IE 7之前的版本中不起作用）。

  function checkSession() {
    $.ajax({
            url:  '/dev/php/checkSession.php',
            type: 'POST',
            error: function(ja){
                console.log(ja);
            },      
            success: function(response) {
                if(response == "")
                {
                var elem = document.getElementById("liitem");
                elem.innerHTML = "Inloggen";
                var elem2 = document.getElementById("aanmelden");
                elem2.style.style.display = 'inline-block'; // whatever property fits better here
                }

            else {
                sessionmaybe = response;
                var elem = document.getElementById("liitem");
                elem.innerHTML = 'Uitloggen';
                var elem2 = document.getElementById("aanmelden");
                elem2.style.style.display = 'none';
            }
            }
        })
}

Answer 2

如果使用display: none则该元素仍将存在于DOM中，但不会占用任何空间。 在使用jQuery时，您可以简化此过程以调用show() / hide()或使用toggle() ：

function checkSession() {
  $.ajax({
    url:  '/dev/php/checkSession.php',
    type: 'POST',
    error: function(ja) {
      console.log(ja);
    },      
    success: function(response) {
      $("#liitem").text(response == "" ? 'Inloggen' : 'Uitloggen');
      $("#aanmelden").toggle(response == "");
    }
  });
}

Answer 3

使用display: none ＆ display: block属性代替visibility 。 与visibility不同， display不会占用DOM中的空间。

但是，与.aanmelden元素关联的任何transition或animation现在都将消失，因为display将呈现状态，而不是进行过渡所需的步进功能。

   function checkSession() {
    $.ajax({
            url:  '/dev/php/checkSession.php',
            type: 'POST',
            error: function(ja){
                console.log(ja);
            },      
            success: function(response) {
                if(response == "")
                {
                var elem = document.getElementById("liitem");
                elem.innerHTML = "Inloggen";
                var elem2 = document.getElementById("aanmelden");
                elem2.style.display = 'block';
                }

            else {
                sessionmaybe = response;
                var elem = document.getElementById("liitem");
                elem.innerHTML = 'Uitloggen';
                var elem2 = document.getElementById("aanmelden");
                elem2.style.display = 'none';
            }
            }
        })
}