0

クリックされたときにブロックを拡大および縮小するために、Packery と組み合わせて次のコードを見つけました。ブロックをクリックすると、現在展開されている他のすべてのブロックが元のサイズに縮小され、一度に 1 つのブロックのみが展開されるようにコードに追加したいと考えています。

これがコードです

$( 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 );
    }
  });
});

これは私が見つけたコードペンです http://codepen.io/anon/pen/myLbmP

.not セレクターを使用してみましたが、正しく動作するように書き直すことができないようです。前もって感謝します

4

1 に答える 1

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 );
    }
  });
});
于 2015-02-21T09:21:00.713 に答える