单击时的 Div 扩展

Question

我想知道是否有人可以给我一些关于用于 div 扩展的 javascript/jquery 的见解。在 JSFiddle 你会发现：

• 四个黑色 div：

  .first_box {
  width: 142px;
  height: 142px;
  margin-left: 0px;
  margin-top: 0px;
  position: absolute;
  display: table;
  background-color: black;
  }
  

• 每个 div 的独特悬停颜色：

  .first_box:hover {
  width: 142px;
  height: 142px;
  margin-left: 0px;
  margin-top: 0px;
  position: absolute;
  display: table;
  background-color: green;
  }
  

所以我的问题是：

我可以使用什么来在单击 div 时将其扩展为四个 div 的大小 (289 X 289)？

然后，展开后的 div 将填充独特的内容。

谢谢！

JSFiddle：http://jsfiddle.net/SXfeG/1/

Answer 1

如果你使用绝对定位，你可以添加一些这样的 CSS：

.div-clicked {
    width: 289px !important ;
    height: 289px !important ;
    margin-top: 0 !important ;
    margin-left: 0 !important ;
    z-index: 400 ;
}

div {
    transition: all 1s ; // To add transition effect
}

然后，使用 jQuery，您可以简单地使用以下命令切换“点击”类：

$('div').on('click', function (e) { $(this).toggleClass('clicked') ; })

JSFiddle : http://jsfiddle.net/85QFN/