更改HTML元素的可见性

Question

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

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

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

我目前有像xpaths / CSS Selectors这样的元素的定位器，我不想隐藏。

例如我有这个link。我想通过隐藏所有其他元素来仅查看它现在所在的。

Answer 1

可见性使用

的jQuery

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

CSS

#element {
visibility: hidden;
}

如果您希望除#element之外的所有其他元素都是＆＃34;隐身＆＃34;：

的jQuery

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

CSS

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

回答你的＆＃39;之后＆＃39;问题 - 除了一个

之外全部不可见

如果你不能分配一个“看不见的”＆＃39;对于应该是invisibile的元素（最佳解决方案），只能以这种方式呈现一个子元素，请参阅JsFiddle。

这意味着：

• 设置所有＆＃39;隐形＆＃39;：$("*").css("visibility", "hidden");
• 设置您要显示的元素：$("#element").css("visibility", "visible");

在您的情况下，您想要展示的元素是一个小小的嵌套＆＃39;你可以这样做：

  // 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树复杂，没有任何可能分配一些自定义类。我认为这是唯一的解决方案......

Answer 2

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

除了使用这样的样式之外，所有元素都适用：

* {
    visibility: hidden;
}

#element {
    visibility:visible !important;
}

JSFiddle

Information on visibility.

Answer 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;
}

Answer 4

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

.class {
  visibility: hidden;
}

然后

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

Answer 5

使用这个

jquery的

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