删除切换 class

Question

这是我第一次在这里提问，让我们看看进展如何！我在我的一个网站 (allworkedup.org) 中使用 Masonry 网格布局，但无法解决切换 class 的问题。基本上，我一次只希望打开一个网格项，并且在我单击另一个网格项后该网格项就会消失。下面是我的代码。谢谢！！

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

  });


  $grid.on( 'click', '.grid-item', function() {
  // change size of item via class
  $( this ).toggleClass('grid-item--gigante');
  // trigger layout
  $grid.masonry();
  //
  });

  $grid.on( 'layoutComplete', function( event, laidOutItems ) {
  console.log( 'Masonry layout complete with ' + laidOutItems.length + '   items' );
  });



// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

Answer 1

而不是使用切换 class 功能（这需要用户点击项目打开然后再次关闭它），您可以使用类似的东西：

$grid.on( 'click', '.grid-item', function() {
    // Close all other open items and open the one that was just clicked
    $( this ).siblings().removeClass('grid-item--gigante');
    $( this ).addClass('grid-item--gigante');
    // trigger layout
    $grid.masonry();
});

这样，当用户单击其中一个网格项目时，该项目的所有兄弟项目（所有其他框）都会关闭，而被单击的项目将展开。

删除切换 class

Remove toggle class

javascript

jquery

toggle

masonry