Javascript 在显示关闭当前div的情况下切换div by元素的可见性

我使用下面的函数来关闭类名的所有Div。我正在图片上使用OnClick事件来运行此函数：

function toggle_visibility(id) {
    var myClasses = document.querySelectorAll('.ElementInfo'),
    i = 0,
    l = myClasses.length;

    for (i; i < l; i++) {
       myClasses[i].style.display = 'none';
    }
    var e = document.getElementById(id);
    if(e.style.display == 'block')
       e.style.display = 'none';
    else
       e.style.display = 'block';
}

在我使用的HTML中：

<a href="#"onclick="toggle_visibility('UserAccess');" ><img src="Images/files.png" width="542" height="117" /></a>
<a href="#"onclick="toggle_visibility('WhoSupports');"><img src="Images/Whotocall.png" width="542" height="118" />


<div class="ElementInfo" ID="UserAccess"><p>Info goes here</p></div>
<div class="ElementInfo" id="WhoSupports"><p>who to call info goes here</p></div>

这很好用

它确实阻止我隐藏当前显示的div，我希望能够：

单击图像以显示div。 再次单击图像以隐藏div 单击其他图像以按类隐藏任何div并显示其他div

---

这能做到吗？我还没能解决这个问题。

像这样的事情，或者我完全错了：：

    function toggle_visibility(id) {
    var myClasses = document.querySelectorAll('.ElementInfo'),
    i = 0,
    l = myClasses.length;

    for (i; i < l; i++) {
      if(myClasses[i]!=document.getElementById(id)) {
       myClasses[i].style.display = 'none';
      }
    }
    var e = document.getElementById(id);
    if(e.style.display == 'block')
       e.style.display = 'none';
    else
       e.style.display = 'block';
}

---

如果单击第一个图像，将打开第一个div。然后，如果单击“第二个图像”，则“第一个分区隐藏”“第二个分区打开”。如果再次单击第二个div，则所有div（包括第二个div）都将隐藏

这里有一个更好的jQuery解决方案。正如您应该看到的那样，我使用下面的click事件来调用函数“toggle_visibility”，从而将onClick事件从HTML代码分离到JavaScript代码

$('a').click(function () {
    toggle_visibility($(this).attr('class'));
});

这是一把小提琴，带有注释代码，您可以理解它：

---

也提供一些html代码。因此，每个图像都有一个与其关联的div，单击后您想显示该div吗？添加了html Nelek。我可以用jQuery为您提供解决方案吗？大多数div都有相同的类，都有不同的ID。单击图像时，我希望关闭同一类中的所有div，并打开新div；除非，如果用户第二次单击同一个图像，我希望它只关闭当前打开的div。当前，所有div加载为隐藏，用户单击一个图像，就会打开一个div。他们可以点击一个不同的图像，加载新的div，但是我不能返回到没有显示div的状态。太好了！我明白这是怎么回事了。非常感谢你！