似乎找不到並切換已擴展的類

Question

我發現以下代碼與Packery結合使用，可以在單擊時擴展和縮小塊。 我想在代碼中添加以下內容：單擊一個塊時，當前已展開的所有其他塊都將縮小到其原始大小，以便此時僅擴展一個塊。

這是代碼

$( function() {
  var $container = $('.packery').packery();

  $container.on( 'click', '.item', function( event ) {
    var $item = $( event.currentTarget );
    var isExpanded = $item.hasClass('is-expanded');
    $item.toggleClass('is-expanded');
    if ( isExpanded ) {
      // if shrinking, just layout
      $container.packery();
    } else {
      // if expanding, fit it
      $container.packery( 'fit', event.currentTarget );
    }
  });
});

這是我發現的Codepen http://codepen.io/anon/pen/myLbmP

我一直在嘗試使用.not選擇器，但似乎無法重寫它以使其正常工作。 提前致謝

Answer 1

將代碼更改為此：

$( function() {
  var $container = $('.packery').packery();

  $container.on( 'click', '.item', function( event ) {
    var $item = $( event.currentTarget );
    var isExpanded = $item.hasClass('is-expanded');
    //NEW LINE BELOW
    $(".is-expanded").removeClass("is-expanded");
    if ( isExpanded ) {
      // if shrinking, just layout
      $container.packery();
    } else {
       $item.addClass('is-expanded');
      // if expanding, fit it
      $container.packery( 'fit', event.currentTarget );
    }
  });
});