jquery - 在同一个地方的 div 中显示/隐藏数据？

Question

我目前有这样的东西:我正在努力让它更像这样:

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

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

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

Answer 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 应该随它一起移动并在必要时调整大小。