javascript - 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 中一样。如果您出于某种原因需要使用可见性，我建议在现在隐藏的div下方放置一个容器div，它可以触发显示功能；然而，对于当前的问题，这已经足够了。