jquery - 砌体，单击新项目时删除类？一次只能打开一个项目？

Question

我正在使用 [ http://codepen.io/desandro/pen/ILbJy][1]

[1]：http ://codepen.io/desandro/pen/ILbJy Masonry Jquery Plugin 现在我的目标是找到一种方法，一次只激活一个项目。因此，当您扩展一个新项目时，您当前打开的项目会恢复到其原始形式。我对编程很陌生，真的不知道从哪里开始。

这是我的 Java 脚本：

<script>
var transitionProp = getStyleProperty('transition');
var transitionEndEvent = {
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'otransitionend',
transition: 'transitionend'
}[ transitionProp ];

$( function() {

var $container = $('.masonry').masonry({
  itemSelector: '.item',
  columnWidth: '.grid-sizer'
});

$container.on( 'click', '.item-content', function( event ) {
  var $this = $(this);
  var previousContentSize = getSize( this );
  // disable transition
 // if($('.item').hasClass('is-expanded')){
   // $('.item').removeClass('is-expanded');
 // }
 // if($(this).parent().hasClass('is-expanded')){
 //   alert("asf");
 // }
  this.style[ transitionProp ] = 'none';
  // set current size
  $this.css({
    width: previousContentSize.width,
    height: previousContentSize.height
  });
  if($('.is-expanded').length>0){
      $('.is-expanded').each(function(){
         if($(this).parent()!=$this.parent()){
             $('.is-expanded > .item-content').css({width:'',height:''});
             $('.is-expanded').removeClass('is-expanded');
         } 
      });
  }
  var $itemElem = $this.parent().addClass('is-expanded');


  // force redraw
  var redraw = this.offsetWidth;

  // renable default transition
  this.style[ transitionProp ] = '';

  // reset 100%/100% sizing after transition end
  if ( transitionProp ) {
    var _this = this;
    var onTransitionEnd = function() {
      _this.style.width = '';
      _this.style.height = '';
    };
    $this.one( transitionEndEvent, onTransitionEnd );
  }

  // set new size
  var size = getSize( $itemElem[0] );
  $this.css({
    width: size.width,
    height: size.height
  });

  $container.masonry();

});
</script>

请帮助任何帮助将不胜感激..？

Answer 1

尝试这个，

$container.on( 'click', '.item-content', function( event ) {
   var $this = $(this);
   var previousContentSize = getSize( this );     
   this.style[ transitionProp ] = 'none';
   // set current size
   $this.css({
      width: previousContentSize.width,
      height: previousContentSize.height
   });
   // remove previously added expanded class from item
   $('.item').removeClass('.is-expanded');

   var $itemElem = $this.parent().addClass('is-expanded');   

   // force redraw
   var redraw = this.offsetWidth;    
   // renable default transition
   this.style[ transitionProp ] = '';    
   // reset 100%/100% sizing after transition end
   if ( transitionProp ) {
      var _this = this;
      var onTransitionEnd = function() {
        _this.style.width = '';
        _this.style.height = '';
      };
      $this.one( transitionEndEvent, onTransitionEnd );
   }

   // set new size
   var size = getSize( $itemElem[0] );
   $this.css({
      width: size.width,
      height: size.height
   });    
   $container.masonry();    
});

Answer 2

这对我有用

  var $grid = $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });

  $grid.on( 'click', '.grid-item-content.has-bio', function( event ) {
    var $gridItem = $( event.currentTarget ).parent('.grid-item');
    $gridItem.one( 'transitionend webkitTransitionEnd', function() {
      $grid.masonry();  
    });
    $gridItem.toggleClass('is-expanded').siblings().removeClass('is-expanded');
  });