Question

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

目前，整个点击的元素是可点击的，以便将其恢复到之前的状态。是否可以添加一个紧密的X＆＃39;链接到切换状态而不是整个元素可点击的按钮？

$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单击以切换 - 如何使用关闭按钮

1 个答案: