javascript - 通过显示关闭当前 div 的元素切换 div 的可见性

Question

我正在使用以下函数关闭类名的所有 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。

这能做到吗？我一直无法解决。

Answer 1

像这样(或者我完全错了 :( ) :

    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，所有 div，包括第二个 div，都会隐藏。 (?)