Javascript 单击第二个父菜单时，显示其子菜单并隐藏先前单击的父菜单的子菜单

我有一个带有子菜单的垂直菜单，我只想在单击父菜单时显示子菜单，一次只显示一个子菜单。但问题是，当单击其他父菜单时，会显示其子菜单，但也会看到上一个子菜单。如何隐藏上一个子菜单？？请帮忙。我是javascript新手。 这是我的html css javascript代码

<div class="menu">
<ul >


  <li><a href="#" onclick= "Myfunction('cert')">Contacts</a>
   <div style="display: none;" id="cert">
           <ul >
                <li >Submenu 1</li>                                     
                <li>submenu 2</li>
           </ul>
    </div>
   </li>

  <li><a href="#"  onclick="Myfunction('defect')">About</a>
  <div style="display: none;" id="defect">
        <ul >
          <li>menu 1</li>
          <li>menu 2</li>
      </ul>
  </div>
  </li>

</ul>

您可以使用以下选项：

var lastid;

function Myfunction(obj) {
    var ele = document.getElementById(obj).style;
    var elemLastId = document.getElementById(lastid);
    if (elemLastId != null) {
        elemLastId.style.display = "none";
    }
    lastid = obj;
    if (ele.display == "none") {
        ele.display = "block";
    } else {
        ele.display = "none";
    }
}

我创建了一个新变量来记住最后一个ID。因此您可以调用它并对其应用

display:none

<a class="Label">Contacts</a>
<div>
    <ul class="Submenu">
        <li>Menu 1</li>
        <li>Menu 2</li>
    </ul>
</div>

<a class="Label">About</a>
<div>
    <ul class="Submenu">
        <li>Menu 1</li>
        <li>Menu 2</li>
    </ul>
</div>

---

这就是jQuery方法。我会让另一个couragous家伙用原生js:D来做，最简单的方法是使用全局JavaScript变量，尽管它不是很优雅。由于您没有使用任何JavaScript库，例如jQuery，其他一切都将变成一堆DOM遍历意大利面条代码

var openEle = null;

function Myfunction(obj) {
    var ele = document.getElementById(obj);
    if (openEle != null) {
        openEle.style.display = "none");
    }
    if (ele.style.display == "none") {
        openEle = ele;
        ele.style.display = "block";
    } else {
        ele.style.display = "none";
    }
}

---

@林库，太好了！很高兴我能提供帮助。实际上，我建议使用

display:none以便在移除类后元素恢复其以前的显示属性，并且不会强制
显示：块当然，这也行，实际上纯CSS最好，但是JS是OP关于.Btw document的问题。getElementById（）在找不到元素时返回null。不需要松散的测试。@Virus721，但如果脚本出现错误，浏览器可以停止脚本，这样更安全。每次我看到并排的解决方案将普通JavaScript与库支持的解决方案进行比较时，我都会更加欣赏jQuery。
(function($) {

    $(function() {

        $('.Label').on('click', function() {
            $('.Submenu').hide();
            $(this).next().find('.Submenu').show();
        });

    });

})(jQuery);

var openEle = null;

function Myfunction(obj) {
    var ele = document.getElementById(obj);
    if (openEle != null) {
        openEle.style.display = "none");
    }
    if (ele.style.display == "none") {
        openEle = ele;
        ele.style.display = "block";
    } else {
        ele.style.display = "none";
    }
}