在同一地点的div中显示/隐藏数据？

Question

我目前有类似的内容：我正在努力使它更像这样：

这不是困难的部分，我基本上已经完成了（感谢上一个问题的回答，它看起来像是在狭窄的屏幕/移动设备上的第一张图片，第二张在大屏幕，平板电脑等上） / p>

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

我知道这个问题已被多次询问，我正在查看其他一些问题，看看它们是否属于类似情况。

Answer 1

如果他们有绝对显示（顶部：无论如何;左边：无论如何），你可以将两个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应该随之移动并在必要时调整大小。

Answer 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。