没问题！咱们可以通过三步实现这个需求：给网格元素添加关闭按钮、设置按钮样式、修改JS事件逻辑，让只有点击关闭按钮才能取消放大状态，点击网格元素只会触发放大。

1. 给网格元素添加关闭按钮的HTML结构 #

首先，你需要在每个.grid-item内部添加一个关闭按钮，比如：

<div class="grid-item">
  <!-- 网格元素原有内容 -->
  <button class="close-btn">×</button>
</div>

这个按钮默认隐藏，只有当元素被放大（拥有gigante类）时才显示。

2. 设置关闭按钮的CSS样式 #

添加CSS来控制按钮的位置和显示状态，你可以根据自己的设计调整细节：

.grid-item {
  position: relative; /* 让关闭按钮相对于网格元素定位 */
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  display: none; /* 默认隐藏按钮 */
}

/* 元素放大时显示关闭按钮 */
.grid-item.gigante .close-btn {
  display: block;
}

3. 修改JavaScript事件逻辑 #

调整原来的点击事件，拆分放大和缩小的触发逻辑：

// 点击未放大的网格元素：仅执行放大操作
$grid.on('click', '.grid-item:not(.gigante)', function() {
  $(this).addClass('gigante').siblings().removeClass('gigante');
  $grid.isotope('layout');
});

// 点击关闭按钮：取消放大状态
$grid.on('click', '.close-btn', function(e) {
  e.stopPropagation(); // 阻止事件冒泡，避免触发网格元素的点击事件
  $(this).closest('.grid-item').removeClass('gigante');
  $grid.isotope('layout');
});

这里的e.stopPropagation()是关键——它能防止点击关闭按钮时，事件向上传递到.grid-item，避免出现"刚关闭又立刻放大"的冲突问题。

这样修改后，用户点击未放大的网格元素会触发放大，想要恢复原有状态只能点击右上角的关闭按钮，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Chris