Vanilla JS 隐藏/显示 DIV 切换器

Question

我正在尝试实现一种使用由单击事件触发的普通 JavaScript 来显示/隐藏 div 元素的方法。 隐藏功能运行良好，但在再次显示 div 时我似乎遗漏了一些重要的东西。 我已经验证了切换器功能是否正常工作。

这里的简单沙箱： https : //codepen.io/pen/eYmOzVe

 (function() { "use strict"; // HTML References var flags = document.querySelector(".flags"); // Toogle var toogle = true; // Flag object var flagObject = { init: function(part1, part2, part3, part4, part5) { this.part1 = part1; this.part2 = part2; this.part3 = part3; this.part4 = part4; this.part5 = part5; }, draw: function() { flags.innerHTML += ` <div id="${this.part1}"> <div class="${this.part2}"> <div class="${this.part3}"></div> <div class="${this.part4}"></div> <div class="${this.part5}"></div> </div> </div> `; }, toogler: function(arg) { toogle ? flagObject.remove(arg) : flagObject.show(arg); toogle = !toogle; }, remove: function(arg) { if (arg == "1") { flag1Element.style.visibility = "hidden"; } if (arg == "2") { flag2Element.style.visibility = "hidden"; } }, show: function(arg) { if (arg == "1") { flag1Element.style.visibility = "visible"; } if (arg == "2") { flag2Element.style.visibility = "visible"; } } }; // Create instances of the object var swedishFlag = Object.create(flagObject); var japaneseFlag = Object.create(flagObject); // Init swedishFlag.init( "flag1", "flag-sweden", "cross-one-sweden", "cross-two-sweden" ); japaneseFlag.init("flag2", "flag-japan", "circle-japan"); // Array containing all flags var allObjects = [swedishFlag, japaneseFlag]; // Draws flags for (let i = 0; i < allObjects.length; i++) { allObjects[i].draw(); } // HTML element refrences var flag1Element = document.querySelector("#flag1"); var flag2Element = document.querySelector("#flag2"); // Add eventlisteners to remove flags on click flag1Element.addEventListener("click", function() { flagObject.toogler(1); }); flag2Element.addEventListener("click", function() { flagObject.toogler(2); }); })();

 h1 { text-align: center; } h3 { color: green; } .content { border: 1px solid black; background-color: #eee; padding: 2em; margin: 0 auto; height: 1000px; width: 800px; border-radius: 30px; text-align: center; } .flags { display: flex; justify-content: center; flex-direction: column; align-items: center; height: 1000px; } .flag-sweden { position: relative; background-color: #006aa7; height: 200px; width: 320px; margin-bottom: 2em; } .cross-one-sweden { background-color: #fecc00; position: absolute; width: 40px; height: 200px; top: 0; left: 100px; } .cross-two-sweden { background-color: #fecc00; position: absolute; width: 320px; height: 40px; top: 80px; left: 0; } .flag-japan { position: relative; height: 200px; width: 320px; background-color: white; margin-bottom: 2em; } .circle-japan { background-color: #bd0029; height: 125px; width: 125px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -62.5px 0 0 -62.5px; }

 <h1>Sandbox</h1> <div id="content" class="content"> <div class="flags"></div> </div>

Answer 1

正如 Pavlin Petkov 在评论中所说，当您隐藏图像时，该图像不可点击，因此您无法将其重新打开。 实现相同结果的一个简单解决方案是更改不透明度而不是可见性：

remove: function(arg) {
  if (arg == "1") {
    flag1Element.style.opacity = 0;
  }
  if (arg == "2") {
    flag2Element.style.opacity = 0;
  }
},
show: function(arg) {
  if (arg == "1") {
    flag1Element.style.opacity = 1;
  }
  if (arg == "2") {
    flag2Element.style.opacity = 1;
  }
}

这将显示/隐藏具有点击效果的 div，并且它将继续占用页面上的空间，就像在您的 codepen 中一样。 如果您出于某种原因需要使用visibility ，我建议在现在隐藏的 div 下方使用一个容器 div，它可以触发 show 功能； 然而，对于手头的问题，这就足够了。