Кнопка Закрыть для расширения див

Question

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

Решения для любого из двух приведенных ниже будут отличными.

Спасибо!

Первый CodePen

https://github.com/colinlohner/FSM-JS

Второй CodePen

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.3/TweenMax.min.js

Answer 1

Создайте кнопку закрытия и прикрепите прослушиватель событий щелчка к кнопке закрытия вместо расширенного div.

Предположим, что в первом пере у вашей кнопки закрытия есть идентификатор closing-button. Вам придется заменить

$fsmActual.addEventListener("click", closeFSM);

на

document.querySelector('#closing-button')

Второй имеет функцию закрытия для каждого элемента div, поэтому вам потребуется кнопка закрытия для каждого элемента div. Попробуйте это:

[...]
var tiles = document.querySelectorAll(".tile");
var closing = document.querySelectorAll(".closing-button");

for (var i = 0; i < tiles.length; i++) {  
  addListeners(tiles[i], pages[i], closing[i]);
}

function addListeners(tile, page, close) { 

  tile.addEventListener("click", function() {
    animateHero(tile, page);
  });

  close.addEventListener("click", function() {
    animateHero(page, tile);
  });