展开 div 的关闭按钮

Question

我正在尝试添加一个关闭按钮，用于将展开的 div 关闭到其原始状态。现在在下面的两个例子中，你可以点击任何地方关闭它，我想禁用它。

以下两个中的任何一个的解决方案都很好。

谢谢！

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

Second CodePen

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

Answer 1

制作一个关闭按钮并将点击事件侦听器附加到关闭按钮而不是展开的 div。

在第一笔中，假设您的关闭按钮具有 ID 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);
  });

展开 div 的关闭按钮

Close button for an expanding div

javascript

gsap

codepen