javascript - 同位素单击以切换-如何使用关闭按钮

我在JS中使用以下代码来在单击时切换网格元素的大小。单击元素时，此切换按钮将更改元素的大小，并显示更多内容。

当前，整个clicked元素都是可单击的，以便使其恢复到之前的状态。是否可以添加一个链接到切换状态的关闭“ X”按钮，而不是使整个元素都可单击？

$grid.on( 'click', '.grid-item', function() {
  // change size of item by toggling gigante class
  $( this ).toggleClass('gigante').siblings().removeClass('gigante');
  $grid.isotope('layout');
});

https://codepen.io/whitinggg/pen/pLMdWB

最佳答案

尝试这个：

$grid.on( 'click', '.toggle', function() {
// change size of item by toggling gigante class
$(this ).closest('.grid-item').toggleClass('gigante').siblings().removeClass('gigante');
$grid.isotope('layout');
});

更改按钮：

<p><i class="toggle far fa-plus-square"></i></p>
<div class="toggle close-button"><button>X</button></div>

这是一个codepen

关于javascript - 同位素单击以切换-如何使用关闭按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50327830/