javascript - 修复高度样式和 onclick 扩展 div

Question

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

• 具有相同的宽度和高度
• 这些 div 必须具有动态的宽度和高度属性，这取决于屏幕的高度和宽度。
• 每个 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>