javascript - 点击功能打开输入图像，再次点击功能关闭

Question

我通读过类似问题的答案，但大多数是 jQuery 答案。我只使用 JavaScript 来执行此操作，所以如果有人可以帮助我解决我的问题就太好了。

到目前为止，在我的 js 中，当我的输入图像被点击时，我的函数会显示一个框。我希望能够再次单击此输入图像以关闭该框。目前我无法通过单击图像将其关闭。

这是我的js:

var settings = document.getElementById('cog');
settings.onclick = Cog;


function Cog(){
document.getElementById('settings').style.display = "block";
document.getElementById('cogbox').style.display = "block";
}

'cog' 是我的图像和可点击的输入。我缺少什么代码来通过单击“齿轮”图像关闭框？

Answer 1

我相信您只需要一个变量来检查是否应该显示或隐藏该框。检查这是否有效:

var settings = document.getElementById('cog');
settings.onclick = Cog;

var cogShow = false;
function Cog(){
    cogShow = !cogShow;
    document.getElementById('settings').style.display = (cogShow ? "block" : "none");
    document.getElementById('cogbox').style.display = (cogShow ? "block" : "none");
}

或者您可以进一步简化它，通过检查 cogbox 是否可见，并在再次单击时执行与对象相反的操作:

var settings = document.getElementById('cog');
settings.onclick = Cog;

function Cog(){
    show = (document.getElementById('cogbox').style.display === "none");
    document.getElementById('cogbox').style.display = (show ? "block" : "none");
    document.getElementById('settings').style.display =  (show ? "block" : "none");
}