Question

情况......

HTML：

   <div id="cw">
        <div id="c"></div>        
   </div>
   <a href="#">click me</a>

CSS：

#cw {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px 200px 0 200px;     
    padding: 10px;
}

#c {
    background: blue;
    display: block;
    height: 200px;
    width: 200px;    
}

- ＆GT; http://jsfiddle.net/F6FF2/4/

现在，我想要实现的是这个。如果单击“单击我”链接，则内部容器#c应该从页面上呈现的位置扩展到窗口的完整范围。

我认为这只能通过为元素分配position: absolute来实现。但后来我遇到了它的父母处于相对位置的问题。

所以我到目前为止所提出的是克隆#c，将其从DOM中删除并将克隆附加到body，然后动画扩展会提供所需的结果。但问题是，如果#c包含例如Google地图，则必须在克隆事件后重新映射地图（而不仅仅是刷新磁贴）。

除了这个解决方案似乎相当混乱的事实。必须有一个更好，更清洁的解决方案。

有什么想法吗？

Answer 1

你在这里覆盖了内容（地图）：

c.text(c_width+" > "+c_height+" > "+c_left+" > "+c_top);

不要覆盖内容，也不要使用克隆（移动原始内容），在完成动画时触发resize-event：

http://jsfiddle.net/F6FF2/10/

Answer 2

你是否尝试将 div移动到body元素而不是克隆它？

$("body").append($("#c"))

您可以在完成后将其移回：

$("#cw").append($("#c"))

从相对定位的父母释放绝对定位的孩子

2 个答案: