Jquery 在脚本中的正确时间删除类时遇到问题

我正在制作一个媒体墙，其中有一个由四个正方形组成的网格，当你点击其中一个正方形时，它会展开并覆盖相邻的正方形（两个宽）。我这样做是通过将绝对类应用于相邻的正方形，然后将单击的正方形扩展到其相邻的同级前面

我的问题是，当你点击一个未打开的方块（sq2），而有一个方块已经打开（sq1），sq1关闭sq2打开，但sq1旁边的方块仍然有绝对类，所以你不能点击瓷砖

我尝试过将移除类放置在不同的位置，但似乎无法正确定位

如果有人能告诉我这件事，我将不胜感激。 提前感谢您的帮助和建议

这是笔：

HTML

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");
        });
    }
  });
});

---

你的主意真不错

顺便说一句，我将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>

还有一点jQuery：

$(function() {

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

});

---

给你

谢谢！我会试试看，然后再给你回复。我认为我的jQuery对于我试图做的事情来说有点冗长，但是我对JS还很陌生，所以我倾向于把厨房的水槽扔到一个问题上！

 <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>

.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;
}

$(function() {

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

});