Question

我正在尝试实现一种通过click事件触发的具有普通JavaScript的显示/隐藏div元素的方法。 hide函数运作良好，但在再次显示div时，我似乎缺少了一些重要的东西。我已经验证了切换功能可以正常工作。

此处的简单沙箱： https://codepen.io/ollebergkvist/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函数；但是，对于眼前的问题，这已经足够了。

香草JS隐藏/显示DIV切换器

1 个答案: