在同一位置的 div 中显示/隐藏数据？答案

【问题标题】：Show/Hide data in divs in same spot?在同一位置的 div 中显示/隐藏数据？
【发布时间】：2012-02-26 05:52:48
【问题描述】：

我目前有这样的东西：，我正在努力使它更像这样：

这不是困难的部分，我基本上已经完成了（感谢上一个问题的答案，它看起来像是窄屏幕/手机上的第一张图片，而大屏幕、平板电脑等上的第二张图片）

绿色虚线区域将是一个 div，您可以在其下方看到两个按钮。我需要隐藏地图（在这种情况下将其推到最左侧，因为 googlemaps 不喜欢隐藏 / 0px div），并且我将使用来自TheJIT 的 Spacetree 作为报告链。我们已经在使用 jQuery，那么当按下绿色虚线 div（我们称之为 .movingcontainer）下方的按钮时，最好的方法是在地图和空间树之间切换？

我知道这个问题已经被问过很多次了，我正在查看其他一些问题，看看它们是否是类似的情况。

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

如果它们具有绝对显示（顶部：随便；左侧：随便），您可以将 2 个 div 堆叠在一起，然后更改它们的 z-index 以将一个放在另一个前面，具体取决于哪个按钮被按下。

编辑

只是为了更好地解释我的第二条评论。假设您有<div id="googlemap"> 和<div id="otherdisplay">。两者都可以包含在<div id="container"> 中。然后，CSS 可能看起来像：

#container {

}

#googlemap {
     position:relative;
     top:0;
     left:0;
     z-index:10;
     max-width:100%;
     overflow:hidden;
}

#otherdisplay {
     position:relative;
     top:0;
     left:0;
     z-index:1;
     max-width:100%;
     overflow:hidden;
}

您可以设置您的容器的样式，但是您需要移动它，并且其中的 2 个 div 应该随着它移动并在必要时调整大小。

【讨论】：

如果我对它们使用绝对值，我可能会遇到让它们在窄屏幕上移动的问题，我必须检查一下。我完全忘记了 z-indexes。
好吧，你可以让这两个 div 相对定位，这样它们里面的任何东西都可以移动，并且它们将保持在里面。
是的，我不知道为什么我没有想到这一点。这应该很好用！
@Rob Cool，很高兴我能帮上忙。 :)

【解决方案2】：

您确定隐藏googlemaps div 不起作用吗？

how to deal with google map inside of a hidden div (Updated picture)

根据该问题/答案，您似乎应该能够将display:none 用于您的googlemaps div。然后，当您需要它时，只需使用 jQuery 给 googlemaps div 这个 CSS：display:block。

【讨论】：