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

Question

我想要一个菜单，我可以点击打开，点击关闭。类似于悬停菜单，但具有单击打开和单击关闭的功能。我有三个可见的列表项，子菜单在下面。

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

就我对这段代码的理解而言，我早些时候在这里得到了一些帮助。现在我已经阅读并观看了 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' 循环，我看到这段代码打开任何数组，或者类似的任何 'li' 具有超过 1 个（ [0] ）项，如0在数组中为1，循环遍历看是否有children。如果是，则打开 'this' 'li's' 'ul'.

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

现在.. 我的问题是我对 Javascript 的了解还不够多，无法解决这个问题，我宁愿不使用 jQuery，而是了解如何使用简单的 Javascript.[=19 来实现这一点=]

任何指点都会有很大帮助，我尝试了以下方法；

将唯一 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");

            }
}

我想通了，我可以用数字指定每个 menu-item，例如 [23]，而不是 [i]，以定位单个菜单项，像这样复制该行：

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

但据我所知，这是一种不好的做法，因为如果我要添加另一个菜单项或删除一个菜单项会很糟糕，而且很多 copy-coding..

我的想法是，我想要这样的东西： 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/

这是一个 fiddle，但是菜单不像在浏览器中那样工作，但是如果你看那里你就会明白，它是左边的菜单。

如何在我的 Javascript 导航中拥有 show/hide 功能？正如我所见，我在这里思考的路径是否正确，类没什么区别，但也许可以为我节省一些编码 space。

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

Answer 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 只是为了简单起见。添加您所做的点击事件是正确的方法。

Answer 2

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("ul").length > 0) {
        elem.setAttribute("id", "activeMenu");
      }
    }

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

      }

      // Only apply it if the element actually has LI child nodes.
      // OPTIONAL: Will still work without if statement.
      if (elem.getElementsByTagName("ul").length > 0) {
        elem.setAttribute("id", "activeSubMenu");
      }
    }
        function showLastSubMenu(elem) {
      // Clear any currently open menu
          var openMenu = document.getElementById("activeMenu");
      if (openMenu)
        openMenu.removeAttribute("id");
      var openSubMenu = document.getElementById("activeSubMenu");
      if (openSubMenu) 
        openSubMenu.removeAttribute("id");
        // Stop if we're just closing the current menu
    var openLastSubMenu = document.getElementById("activeSubMenu");
      if (openLastSubMenu) {
        openLastSubMenu.removeAttribute("id");

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

我 post 完整的代码，在@David 的帮助下得到了一个可点击的菜单解决方案，非常感谢 :)

css 项#someMenu ul、#somemenu ul li 和#someMenu ul ul 必须更改为类，因此 .someMenu ul 等。 #activeMenu > ul { 显示：块； }

#activeSubMenu > ul {
  display: block;
}
#activeLastSubMenu > ul {

  display: block;
}

并且在 html、

<nav id ="someMenu" class="someMenu">
function showMenu on the first level li's, 
function showSubMenu for next level
function showLastSubMenu for the last sub's (I had max 3 levels)

很多重复，所以我会尝试用数组和 addEventListener 把它变成更少的代码，正如你在回答中所说的那样更正确！

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

Javascript click to open and close menu, NOT using jquery

html

javascript

css

arrays

html-lists