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

制作一个关闭按钮，并将click事件监听器附加到关闭按钮，而不是展开的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

1 个答案: