單擊第二個父菜單時，顯示其子菜單並隱藏先前單擊的父菜單的子菜單

Question

我有一個帶有子菜單的垂直菜單，我想僅在單擊父級時顯示該子菜單，一次僅顯示一個子菜單。 但問題是，當單擊其他父菜單時，其子菜單顯示出來，但也可以看到先前的子菜單。 如何隱藏上一個子菜單？ 請幫忙 。 我是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>

腳本

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

Answer 1

最簡單的方法是使用全局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";
    }
}

Answer 2

您可以使用此：

在這里演示

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 。

Answer 3

<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>

和：

(function($) {

    $(function() {

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

    });

})(jQuery);

那就是jQuery的方法。 我讓另一個勇敢的家伙用本地js來完成它：D