这是我第一次在这里问问题，让我们看看情况如何！我正在为我的一个站点（allworkedup.org）使用砖石网格布局，但无法解决切换类问题。基本上，我只希望一次打开一个网格项，一旦我单击另一个网格项，该网格项就会消失。下面是我的代码。谢谢
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');
});
您可以使用以下功能，而不是使用切换类功能（这需要用户单击项目以打开它，然后再次单击以关闭它）：
$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();
});
这样，当用户单击其中一个网格项时，该项的所有同级项（因此所有其他框）都将关闭，而单击的同级项将展开。
