圖擴大到100％的點擊（仍然堅持電網）

Question

這就是我的工作： http://jsfiddle.net/wppjq1a3/

$(document).ready(function(){ 
    $('.sec-img').click(function() { 
     $(this).css({ 
      height: '100%', 
      width: '100%' 
     }); 
    }); 
}); 

我想它做的是以下幾點：

• 當你點擊任何圖像時，它會展開（如果在 之上有一張圖像展開的圖像;那麼小圖像將被推下 展開的圖像

• Al所以當你點擊一張圖片時，先前的展開圖片將 縮小到原始大小（50％）。

• 我想用某種網格工作。圖像全都去 具有相同的大小比例。我試圖與：後得到 這兩個列網格與20px之間（底部和中間）每 圖像，但沒有結果。

Answer 1

試試這個：

http://jsfiddle.net/wppjq1a3/2/ 

而不是添加CSS到jQuery的，我切換的一類。我添加了紅色的背景顏色，以便在區分懸停時不透明度被拒絕，並且我想確保我點擊的div出現在前面。我還添加了一個絕對位置和Z-

的jQuery：

$(document).ready(function(){ 
    $('.sec-img').click(function() { 
     $(this).toggleClass("expand"); 
    }); 
}); 

CSS：

.expand{ 
    width:100% !important; 
    height:100% !important; 
    position: absolute; 
    z-index:999999 !important; 

}