擴展盒

Question

我期待找到一個jQuery代碼，該代碼可讓我具有以下行為（在圖片中）。 因此，我有一個如下所示的網格，如果有人單擊紅色區域（DIV），則該div將覆蓋（越過頂部）其周圍的框（從右側或左側兩個框，一個位於下方或頂部） ）如果他再次單擊，則div將恢復到其正常位置和大小，我不知道該如何實現？ 如果有人可以幫助，我將不勝感激。

階段1： http ： //img341.imageshack.us/img341/461/stage1.jpg

階段2： http ： //img153.imageshack.us/img153/9601/stage2n.jpg

Answer 1

這花了我比我願意承認更長的時間：

http://jsfiddle.net/d4DZd/

訣竅是克隆元素，並擴大該元素而不是原始元素，以使元素保持其位置。

Answer 2

像這樣？

http://jsfiddle.net/kbPqU/

$(".box-spec").click(function() {
    var cover_width = 3,cover_height = 3;
    $("body").prepend('<div class="box-spec" style="width:' + ((128 + 10) * cover_width) + 'px;height:' + ((128 + 10) * cover_height) + 'px"></div>');
});