时间戳

首页 > 解决方案 > 在切换单击的项目之前将全部切换到原始状态

javascript - 在切换单击的项目之前将全部切换到原始状态

问题描述

当我单击一个项目时，它会展开。当我单击另一个项目时，它也会展开，但第一个项目也会展开。我只想随时扩展一项，即：我单击的一项。所以我需要基本上将所有内容切换到原始状态，然后只展开我实际点击的那个。我正在使用的示例有一个 codepen。

// external js: masonry.pkgd.js

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

$grid.on( 'click', '.grid-item-content', function( event ) {
  $( event.currentTarget ).parent('.grid-item').toggleClass('is-expanded');
  $grid.masonry();
});

请参阅 CodePen 上 Dave DeSandro ( @desandro )的 Pen Masonry - 动画项目大小。

标签： javascriptjquery

解决方案

尝试像这样更改代码：

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

$grid.on( 'click', '.grid-item-content', function( event ) {
  var parent = $(event.currentTarget).parent('.grid-item'); //Fetch only parent once
  parent.siblings().removeClass('is-expanded'); //Remove class from others
  parent.toggleClass('is-expanded'); //Set class on clicked item
  $grid.masonry();
});

这将从所有项目（项目的父母兄弟姐妹）中删除该类，然后再将其应用于您单击的项目。

推荐阅读