無法在正確的時間在腳本中移除課程

Question

我正在製作一個媒體牆，其中有一個四格的網格，並且當您單擊其中一個正方形時，它會展開並覆蓋相鄰的正方形（兩個寬）。我這樣做是通過對相鄰的方格應用絕對類，然後擴大點擊的方格，將其放在相鄰的同胞前面。

我遇到的問題是，當您點擊一個未打開的廣場（sq2），而有一個廣場已經打開（sq1）時，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'); 
    } 
    }); 

}); 

在這裏，你去！