使用javascript显示/隐藏脚本

我有一个用于菜单的显示/隐藏脚本。当我点击一个主链接时，它会在下面显示一个列表。我想知道是否有一种方法可以稍微改变它，这样当我点击链接时它会打开，但当我点击下一个链接时，它会关闭另一个链接，而不是让它们都打开，除非你再次点击它关闭

这是我的剧本：

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>


<a href="#" onclick="toggle_visibility('list1');">
       <p>List One</p>
       </a>
       <div id="list1" style="display:none;">
         <ul>
           <li>Item One</li>
           <li>Item Two</li>
           <li>Item Three</li>
         </ul>
       </div>

功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}

项目一
项目二
项目三

假设这是您的代码：

<a href="#" onclick="toggle_visibility('list1');">
  <p>List One</p>
</a>
<div id="list1" style="display:none;">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>
<a href="#" onclick="toggle_visibility('list2');">
  <p>List Two</p>
</a>
<div id="list2" style="display:none;">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>

---

我想再添加一个函数来隐藏除一个当前列表之外的所有列表：

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';

    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.list');
    for (var i = lists.length; i--; ) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

---

你能再描述一下你想要实现的目标吗？你的问题不太清楚。可能是ooo的重复，不知道珊瑚是一个有效的颜色名称。嗯，你每天学一件事，不是吗？如果你看不到这种方法的好处，那就忽略它，发挥你的最大努力。一次显示两个div是否可能？例如，您可以单击列表1的链接，让它同时显示列表1和列表3吗？非常好，这帮助我完成了我的工作。就像一个符咒。加上一个jquery提示第一个非常有效。是什么让你提到的第二个更好？是否有任何方法可以使链接在菜单旁边的同一页上的表或div中打开一个页面，但需要向上重新加载页面并关闭菜单。这有意义吗？@NiCk嗯，我不知道有任何性能增强，但它更简短，更容易理解。@NiCk关于你的第二个问题，你能更详细地解释一下你的意思吗？

function toggle_visibility(id) {
    var list = document.getElementsByClassName("alist");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display = 'none';
    }
    var e = document.getElementById(id);
    if(e.style.display == 'block') {
        e.style.display = 'none';
    } else {
        e.style.display = 'block';
    }
}

function toggle_visibility(id) {
  $(".list").hide();
  $("#" + id).toggle();
}

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';

    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.list');
    for (var i = lists.length; i--; ) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}