Javascript 单击打开和关闭菜单，不使用 jquery

我想要一个菜单​​，可以单击打开，然后单击关闭。 与悬停菜单类似，但需要单击、打开和单击关闭。 我有三个可见的列表项，下面有子菜单。

这些是用 css、display:none 隐藏的。 我可以让它们显示，使用关键字“this”，以及一个用于检查是否有“ul”的 for 循环，是否有超过 1 个项目，然后单击时将打开列表。

据我理解这段代码，我之前在这里得到了一些帮助。 现在我已经阅读并观看了 Buckysroom 的教程，感觉我了解了更多，至少关于数组，以及代码中的所有内容，我现在至少可以理解了。我现在有这个代码。

function showMenu(parentElement){
    var uls= parentElement.getElementsByTagName("ul");
    if (uls.length > 0)
        uls[0].setAttribute("style","display: block");

 }

function load(){ 
    var lis = document.getElementsByTagName("li"); 
    for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", function(){
            showMenu(this);
        }); 
    }
}

正如我所理解的，最后，在“for”循环中，我看到这段代码打开了任何数组，或者像任何具有超过 1 个 ( [0] ) 项的“li”，因为 0 在数组中是 1，并循环遍历看看它是否有孩子。如果是，它会打开“this”“li”“ul”。

由于load函数包含showMenu函数，我学到了一点，在函数内部使用函数，而不是复制自己，使用数组和变量，并以某种方式将它们分配给彼此。 Buckysroom教程，至少帮助我理解了很多。

现在.. 我的问题是我对 Javascript 的了解不够多，无法理解这一点，而且我宁愿不使用 jQuery，而是了解如何使用纯 Javascript 来实现这一点。

任何指示都会有很大帮助，我已经尝试过以下方法；

将唯一的 ID 添加到我的三个 ul 中，这样我知道实际上可以使用上面的代码打开它们，并且我可以使用另一个代码关闭它们，将其设置回“display:none”。

那么问题是我没有机会再次打开它们，并且我知道我缺少一些部分，例如 stopPropagation 或者可能使用 addEventListener - Click，用于第二部分。正如您可能理解的那样，addeventListener 是我从此处的代码中获得的。

 function Meny1(){

    var unorderedList = document.getElementById("ul_1");

            var lis = unorderedList.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","display: none");

            }
}

我发现，我可以用数字指定每个菜单项，例如 [23]，而不是 [i]，以定位单个菜单项，复制该行，如下所示：

lis[23].setAttribute("style","display: none");
lis[24].setAttribute("style","display: none");

但据我了解，这是一种不好的做法，因为如果我要添加另一个菜单项或删除一个菜单项，那就太糟糕了，而且也是大量复制编码的方式。

我的想法是，我想要这样的东西： html:

<div id ="cssmenu"></div>
<ul id="ul_1"><li>I have many li's in each 'ul'</li></ul>
<ul id="ul_2"><li>I have many li's in each 'ul'</li></ul>
<ul id="ul_3"><li>I have many li's in each 'ul'</li></ul>

css:

#cssmenu{display:block;}
#cssmenu ul li ul{display:none}

我对 js 应该如何的思考，并且我不使用类： （我没有这样做，因为 w3c 验证器指出我不应该这样做）。

function showAndCloseMenu1(){
var ul_1 = document.getElementbyId("ul_1");
    if(mouseclicked on ul_2 || mouseclicked on ul_3){
        close.ul_1(this)
    }
        if(mouseClicked ul_1){
         style.display = "block";
        }
}

对于 ul_2 和 ul_3 来说也是如此，我还没有足够好去考虑将所有内容实现到一个代码中，但我知道当然可以使用全局变量并使用属性。

有谁可以帮我解决这个问题吗？

我尝试过使用 jQuery，但没有成功，正如我所说，我宁愿不使用，因为我渴望最大限度地学习 Javascript！我可以阅读 Javascript，jQuery 对我来说只是一堆美元符号，里面有简化的 Javascript。

http://fiddle.jshell.net/ufcsccy3/ http://fiddle.jshell.net/ufcsccy3/

这是一个小提琴，但菜单不像在浏览器中那样工作，但是如果您看一下那里，您就会明白，它是左侧的菜单。

如何使用 Javascript 在导航中具有显示/隐藏功能？ 我在这里思考的路径是否正确，正如我所看到的，类没有什么区别，但也许可以为我节省一些编码空间。

感谢您对此提供的任何帮助，我似乎无法找到可行的解决方案！ 我希望它就像我第一次单击 ul_1 时一样，它会打开。如果我再次单击它，我希望它关闭。 如果 ul_1 打开，然后我单击 ul_2 或 ul_3，我想打开那个，然后再次关闭 ul_1，在我看来，这有点标准菜单导航。

只需切换打开菜单的 ID 即可。一种方法，onclick，这一切都完成了。

function showmenu(elem) {
  // Clear any currently open menu
  var openMenu = document.getElementById("activeMenu");
  if (openMenu) {
    openMenu.removeAttribute("id");
    // Stop if we're just closing the current menu
    if (openMenu === elem) {
      return;
    }
  }

  // Only apply it if the element actually has LI child nodes.
  // OPTIONAL: Will still work without if statement.
  if (elem.getElementsByTagName("li").length > 0) {
    elem.setAttribute("id", "activeMenu");
  }
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  float: left;
  padding: 0 10px;
}
ul ul {
  display: none;
}
ul ul li {
  float: none;
}
#activeMenu ul {
  display: block;
}

<ul>
  <li onclick="showmenu(this)">Menu Item 1</li>
  <li onclick="showmenu(this)">Drop Down 1
    <ul>
      <li>DD1 Item 1</li>
      <li>DD1 Item 2</li>
    </ul>
  </li>
  <li onclick="showmenu(this)">Drop Down 2
    <ul>
      <li>DD2 Item 1</li>
      <li>DD2 Item 2</li>
    </ul>
  </li>
</ul>

请注意，我使用了onclick只是为了简单起见。添加您所做的点击事件是正确的方法。