同位素点击切换 - 如何使用关闭按钮

Question

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

目前，整个被点击的元素都是可点击的，以便 return 将其恢复到之前的状态。是否可以添加一个链接到切换状态的关闭 '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

Answer 1

试试这个：

$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

同位素点击切换 - 如何使用关闭按钮

Isotope Click to Toggle - How to use close button

javascript

jquery

onclick

toggle

jquery-isotope