修复高度样式，并在onclick展开div时

Question

在下面的图片中，我在div中有4个不同的图像

• 宽度和高度相同
• 这些div必须动态地具有width和height属性，这取决于屏幕的高度和宽度。
• 每个div必须有一半的屏幕高度和宽度。

当点击任何div时，该div必须扩展取决于它的位置。如果它位于右上角，那么它应该用动画扩展到左下角，并且应该隐藏其他div。最后扩展div应该有100％的全高和宽度。我试了一下，但不满意。我只需要逻辑并扩展动画类型。

Answer 1

这个怎么样？

$('.box').on('click','.box__inner',function() {
  $(this).closest('.box').find('.box--active').removeClass('box--active');
  $(this).addClass('box--active');
}).on('click','.box--active',function() {
  $(this).removeClass('box--active');
});

html, body {margin:0;padding:0;height:100%;}

.box {width:100%; height:100%;position:relative;outline:1px solid blue;}
.box__inner {position:absolute;min-width:50%;min-height:50%;outline:1px solid red;text-align:center;background-color:white;transition:all .1s ease;}
.box__inner.left {left:0;}
.box__inner.right {right:0;}
.box__inner.top {top:0;}
.box__inner.bottom {bottom:0;}
.box__inner.box--active {min-width:100%;min-height:100%;z-index:1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
  <div class="box__inner left top">Left top</div>
  <div class="box__inner right top">Right top</div>
  <div class="box__inner left bottom">Left bottom</div>
  <div class="box__inner right bottom">Right bottom</div>
</div>