Question

当某个陈述属实时，我试图切换div的存在。

ATM我使用以下JavaScript / AJAX：

   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元素所在的空间，这与将从DOM中移除的display:none不同

来自 MDN

<强>隐藏

该框是不可见的（完全透明，没有绘制任何内容），但仍会影响布局。如果，元素的后代将是可见的   他们有可见性：可见（这在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＆amp; display: block属性而不是visibility。与display不同，visibility不会占用您的DOM中的空间。

但是，与transition元素相关联的任何animation或.aanmelden现在都将消失，因为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';
            }
            }
        })
}

如何切换div的存在而不是可见性

3 个答案: