Question

我的页面上有div包含我想要隐藏的内容，直到单击另一个元素。

隐藏它们时，我有3个选项：

visibilty：隐藏 - 不喜欢这样，因为带内容的div仍占用了我的布局空间

display：none - 这有效，但内容现在无法供搜索引擎使用。

定位，剪辑和（几乎）折叠 - 我通过Google搜索找到了此方法，它具有以下内容：

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

删除属性和刷新元素

1 个答案: