Изотоп Нажмите, чтобы переключить - Как использовать кнопку закрытия

Question

Я использую следующий код в моем JS, чтобы переключать размер элемента сетки при нажатии. При щелчке по элементу этот переключатель изменяет размер элемента и отображает больше содержимого.

В настоящее время весь элемент, по которому щелкнули, можно щелкнуть, чтобы вернуть его в предыдущее состояние. Можно ли добавить кнопку закрытия 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>

Вот кодекс