javascript - 删除属性并刷新元素

Question

我的页面上有 div，其中包含我希望在单击另一个元素之前一直隐藏的内容。

隐藏它们时我有 3 个选择:

可见性:隐藏 - 不喜欢这样，因为包含内容的 div 仍在我的布局中占用空间

display: none - 这行得通，但内容现在对搜索引擎不可用。

定位、剪裁和(几乎)折叠 - 我通过谷歌搜索找到了这种方法，它具有以下内容:

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

这似乎符合我的要求，并使内容可搜索。

现在我想在用户单击另一个元素时显示该内容。

我想我可以使用 .removeAttr()，这会删除所有设置并显示我的内容，然后使用 attr() 将它们重新设置。

好吧，我并没有走得太远，因为 .removeAttr() 似乎没有显示 div。真的什么都没发生，哈哈。

难道我的想法全错了吗？

Answer 1

正如最新的 Bootstrap 所建议的，您可以以此为例:

.element-invisible {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}