javascript - 单击时展开 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/