Question

我已经阅读了类似的问题＆＃39;答案，但大多数是jQuery的答案。我只使用JavaScript来做到这一点，所以如果有人能帮助我解决我的问题会很棒。

到目前为止，在点击输入图像的时候，我的功能会显示一个框。我希望能够再次单击此输入图像以关闭该框。目前我无法通过点击图片来关闭它。

这是我的js：

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


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

＆＃39;嵌齿＆＃39;是我的图像和可点击的输入。通过点击＆＃39; cog＆＃39;图像？

Answer 1

你有没有使用图书馆的原因？如果你要做很多JS，Mootools或JQuery会帮到你很多。虽然Mootools更灵活，但Jquery更容易学习。对于你的问题，你只是真正给它展示的能力，但没有别的。尝试使用如下所示的条件语句：Toggle Html with JS

那应该可以让你到达你需要的地方。

Answer 2

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

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

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

2 个答案: