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

Input image on click function open, on click again function closes

本文关键字：功能 输入 图像      更新时间：2023-09-26

我已经阅读了类似问题的答案，但大多数都是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";
}

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

我相信

你只需要一个变量来检查你是否应该显示或隐藏该框。检查这是否有效：

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");
}
有什么

理由不使用库吗？ 如果你要做很多JS，Mootools或JQuery会帮助你很多。Jquery更容易学习，尽管Mootools更灵活。对于你的问题，你只是真正赋予它展示的能力，尽管没有别的。尝试使用如下所示的条件语句：使用 JS 切换 Html

这应该能让你到达你需要的地方。

相关文章：