Question

我制作的媒体墙上有四个正方形的网格，当你点击其中一个正方形时，它会展开并覆盖相邻的正方形（两个宽）。我通过将绝对类应用于相邻的正方形，然后展开点击的正方形，将其放在相邻的兄弟面前来做到这一点。

我遇到的问题是当你打开一个正方形（sq1）时点击一个未打开的方块（sq2），sq1关闭sq2会打开但是sq1旁边的方块仍然有绝对类，所以你不能点击瓷砖。

我已经尝试过将删除类.behind放在各个地方，但我似乎无法做到正确。

如果有人能说清楚这一点，我会很感激。提前感谢您的任何帮助和建议。

以下是笔：http://codepen.io/number8pie/pen/rLOQZq

HTML

<section class="box-wrap">
  <div class="box blue-mid">
    <i class="close"></i>
    <div class="content"></div>
  </div>
  <div class="box blue-light">
    <i class="close"></i>
    <div class="content"></div>
  </div>
  <div class="box blue-light">
    <i class="close"></i>
    <div class="content"></div>
  </div>
  <div class="box blue-mid">
    <i class="close"></i>
    <div class="content"></div>
  </div>
</section>

CSS

.blue-light {
  background-color: #b3e6ff;
}

.blue-mid {
  background-color: #66ccff;
}

.box-wrap {
  width: 600px;
  height: 600px;

  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.box {
  position: relative;
  width: 50%;
  height: 50%;

  z-index: 1;
}

.box:nth-child(2),
.box:nth-child(4) {
  margin-left: auto;
}

.behind {
  position: absolute;
  z-index: -10;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
  cursor: pointer;
  color: #cc0000;
}

的jQuery

$(document).ready(function() {
  $(".box-wrap > .box").click(function(event) {
    // Set up DOM variables
    $this = $(this);
    $siblings = $(this).siblings(".box");

    var fullWidth = $(".box-wrap").width();
    var halfWidth = ($(".box-wrap").width() / 2);

    if ($this.hasClass("active")) {
      $this.animate({
          width: halfWidth
        },
        500,
        function() {
          $this.removeClass("active");
          $siblings.removeClass("behind");
          $this.children(".close").removeClass("fa fa-close");
        });
    } else {
      // remove all active classes from other elements and set to halfWidth
      $siblings.animate({
          width: halfWidth
        },
        500,
        function() {
          $siblings.removeClass("active");
          $siblings.children(".close").removeClass("fa fa-close");
        });

      // find out what child this element is
      var index = $this.index();

      switch (parseInt(index)) {
        case 0:
          $siblings.eq(0).addClass("behind").css({
            top: '0',
            right: '0'
          });
          break;
        case 1:
          $siblings.eq(0).addClass("behind").css({
            top: '0',
            left: '0'
          });
          break;
        case 2:
          $siblings.eq(2).addClass("behind").css({
            bottom: '0',
            right: '0'
          });
          break;
        case 3:
          $siblings.eq(2).addClass("behind").css({
            bottom: '0',
            left: '0'
          });
          break;
      }

      $this.animate({
          width: fullWidth
        },
        500,
        function() {
          $this.addClass("active");
          $this.children(".close").addClass("fa fa-close");
        });
    }
  });
});

Answer 1

你有个好主意！

Here is the Fiddle

顺便说一下，我把你的jQuery改成了一些可以实现同样功能的CSS风格。您可以将瓷砖的动画样式（当前都很简单）和持续时间更改为一些奇特的效果！

HTML：

 <section class="box-wrap">
  <div class="box boxTopLeft blue-mid">
    <i class="close"></i>
    <div class="content"></div>
  </div>
  <div class="box boxTopRight blue-light">
    <i class="close"></i>
    <div class="content"></div>
  </div>
  <div class="box boxBotLeft blue-light">
    <i class="close"></i>
    <div class="content"></div>
  </div>
  <div class="box boxBotRight blue-mid">
    <i class="close"></i>
    <div class="content"></div>
  </div>
</section>

由于你只有4个方格并且你不必创建更多的方块，你可以用CSS这样设置它：

.blue-light {
  background-color: #b3e6ff;
}

.blue-mid {
  background-color: #66ccff;
}

.box-wrap {
  width: 600px;
  height: 600px;
  position: relative;
}

.box {
  position: absolute;
  width: 50%;
  height: 50%;
  transition: all 1s ease;
  z-index: 1;
}

.boxTopLeft {
  top: 0;
  left: 0;
}

.boxTopRight {
  top: 0;
  left: 50%;
}

.boxBotLeft {
  bottom: 0;
  left: 0;
}

.boxBotRight {
  bottom: 0;
  left: 50%;
}

.boxTopRight.active {
  top: 0;
  left: 0;
}

.boxBotRight.active {
  bottom: 0;
  left: 0;
}

.box.active {
  width: 100%;
  z-index: 10;
}

还有一点jQuery：

$(function() {

  $('.box').click(function() {
    if ($(this).hasClass('active'))
      $(this).removeClass('active');
    else {
      $('.box').removeClass('active');
      $(this).addClass('active');
    }
  });

});

你走了！

无法在脚本中的正确时间删除类

1 个答案: