更改 HTML 元素的可见性答案

【问题标题】：Changing Visibility of HTML elements更改 HTML 元素的可见性
【发布时间】：2013-12-11 17:03:59
【问题描述】：

我想更改除某些特定元素之外的 HTML 元素的可见性。我希望元素处于相同的位置和对齐方式，并且只是要更改元素的可见性。有人可以帮我做吗？

通过查看How to hide all elements except one using jquery? 的答案，我尝试使用 jquery 做同样的事情，但这会改变元素的位置和对齐方式。

$('body > :not(#averageCustomerReviews)').hide(); //this hid everything
$('#averageCustomerReviews').appendTo('body'); //but this changed the position

我目前有一些我不想隐藏的元素的定位器，例如 xpaths/CSS 选择器。

例如我有这个link。而且我只想通过隐藏所有其他元素在当前位置查看。

【问题讨论】：

visibility: hidden; 是你要找的东西
你也可以使用opacity来改变元素的可见性。
请包含您正在使用的 HTML。
请不要包含链接，而是您的实际代码。这样可以确保未来的读者能够理解问题的上下文。
@gibberish 能否提供链接？

标签： javascript jquery html css

【解决方案1】：

能见度使用

jQuery

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

CSS

#element {
visibility: hidden;
}

如果您希望除#element 之外的所有其他元素都“不可见”：

jQuery

$(":not(#element)").css("visibility", "hidden");

CSS

:not(#element) { 
visibility: hidden; 
}

回答你的“之后”问题 - 让所有的人都看不见

如果您无法为应该不可见的元素分配“不可见”类（最佳解决方案），则可以通过这种方式仅呈现可见的一个子元素，请参阅JsFiddle。

意思是：

设置所有“不可见”：$("*").css("visibility", "hidden");
设置要显示的元素可见：$("#element").css("visibility", "visible");

在您的情况下，您想要显示的元素有点“嵌套”，您可以这样做：

  // set all 'invisible'
  $("*").css("visibility", "hidden");

  // set visible the element with their 'sub-child'
  $("#averageCustomerReviews_feature_div, #averageCustomerReviews, #averageCustomerReviews a, .reviewCountTextLinkedHistogram, .reviewCountTextLinkedHistogram a, .a-popover-trigger, .a-popover-trigger i").css("visibility", "visible");

不太好，但它有效。

有了这样一个复杂的 html 树，并且没有任何可能分配一些自定义类。我认为这是唯一的解决方案...

【讨论】：

我希望隐藏除#element 之外的所有其他元素。
但它也隐藏了#element。是不是因为嵌套在其他div下面？
@VaibhavAgarwal 可以，可能有一个父 div 受到了“隐形”的影响，那么孩子也受到了影响
@VaibhavAgarwal 我认为更好的方法是为所有应该具有可见性的元素分配一个类：隐藏。然后你可以用上面的例子之一来调用它。
@VaibhavAgarwal 如果没有看到您的标记，我们将无法准确地告诉您如何执行此操作。 damoiser 建议为所有应该隐藏的元素分配一个类可能是你最好的选择。

【解决方案2】：

使用visibility: hidden;。与display: none; 不同，该元素仍然存在。

也适用于除一个以外的所有元素，使用这样的样式：

* {
    visibility: hidden;
}

#element {
    visibility:visible !important;
}

JSFiddle

Information on visibility.

【讨论】：

【解决方案3】：

如果您想隐藏除 #element 之外的所有内容，请使用以下命令：

:not(#element) {
    visibility: hidden;
}

有关:not() 选择器的更多信息，请参见此处：https://developer.mozilla.org/en-US/docs/Web/CSS/:not

更新

您还可以将:not() 选择器链接在一起以排除多个元素。例如，如果您有不应隐藏的 #element1 和 #element2，则执行以下操作：

:not(#element1):not(#element2) {
    visibility: hidden;
}

【讨论】：

【解决方案4】：

您可以在 CSS 中进行设置，其中 class 是您要隐藏的所有元素上的类：

.class {
  visibility: hidden;
}

然后

$('#element').css('visibility', 'visible');

【讨论】：

【解决方案5】：

使用这个

jquery

 $("#elementid").onclick(function() {
  $('body').css({ 'visibility': 'hidden'});
    $('#elementid').css({ 'visibility': 'visible'});
});

【讨论】：