如何使用 jQuery 隐藏 div？答案

【问题标题】：How to hide a div with jQuery?如何使用 jQuery 隐藏 div？
【发布时间】：2011-07-19 12:39:58
【问题描述】：

当我想隐藏 HTML <div> 时，我使用以下 JavaScript 代码：

var div = document.getElementById('myDiv');
div.style.visibility = "hidden";
div.style.display = "none";

jQuery 中该代码的等价物是什么？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$('#myDiv').hide();

或

$('#myDiv').slideUp();

或

$('#myDiv').fadeOut();

【讨论】：

这三个实际上是相同的display:none，只有三种不同的动画效果。正确答案是@honk31 .css("visibility", "hidden")，这是有目的的！ visiblity:hidden 与 display:none 不同，它会继续使用空间，而 display:none 的行为就像它永远不存在一样。
@Developer 虽然这是一个有趣且可能有用的观点，但我绝对没有看到任何迹象表明您的解决方案是预期的效果。相反，似乎 OP 发现它可以很好地回答他们的问题。同样出于我的目的，继续占用空间实际上是非常不可取的。不要自大。
就像我们在 RTFM 之前所说的那样。在最初的帖子中，有人问visibility =“hidden”和display =“none”有什么区别，他有没有问过如何制作隐藏动画？保持主题！

【解决方案2】：

$("#myDiv").hide();

将css显示设置为无。如果您还需要将可见性设置为隐藏，可以通过

$("#myDiv").css("visibility", "hidden");

或将两者组合成一个链

$("#myDiv").hide().css("visibility", "hidden");

或用一个 css() 函数编写所有内容

$("#myDiv").css({
  display: "none",
  visibility: "hidden"
});

【讨论】：

这个答案应该被选为正确的，我不知道为什么人们投票给了完全错误的答案！
要使其可见，请使用visible 而不是hidden。

【解决方案3】：

简单：

$('#myDiv').hide();

http://api.jquery.com/hide/

【讨论】：

【解决方案4】：

如果你想让元素保持它的空间那么你需要使用，

$('#myDiv').css('visibility','hidden')

如果你不希望元素保留它的空间，那么你可以使用，

$('#myDiv').css('display','none')

或者简单地说，

$('#myDiv').hide();

【讨论】：

【解决方案5】：

$("myDiv").hide(); 和 $("myDiv").show(); 在 Internet Explorer 中不能很好地工作。

我解决这个问题的方法是使用.html() 获取myDiv 的html 内容。

然后我将它写入一个新创建的 DIV。然后，我将 DIV 附加到正文，并将变量 Content 的内容附加到 HiddenField，然后在我想显示 DIV 时从新创建的 div 中读取该内容。

在我使用.remove() 方法摆脱了暂时持有我的DIV html的DIV之后。

var Content = $('myDiv').html(); 
        $('myDiv').empty();
        var hiddenField = $("<input type='hidden' id='myDiv2'>");
        $('body').append(hiddenField);
        HiddenField.val(Content);

然后当我想再次显示内容时。

        var Content = $('myDiv');
        Content.html($('#myDiv2').val());
        $('#myDiv2').remove();

这比.hide() 和.show() 方法更可靠。

【讨论】：

【解决方案6】：

$('#myDiv').hide() 将隐藏 div...

【讨论】：

【解决方案7】：

$('#myDiv').hide();hide功能用于编辑内容，show功能用于再次显示。

更多请点击this link。

【讨论】：