javascript - 如何将我的菜单更改为切换菜单？

Question

我的菜单在鼠标悬停时自动打开，当鼠标不再悬停时它关闭菜单，但这个功能不是我想要的，我实际上想更改我的菜单代码以切换菜单和所有 ul我的菜单，我该怎么做？ 下面的代码是我的菜单代码，你可以看看。

代码:

#ABT-Container {
  font-family: 'Roboto', sans-serif;
  background: transparent;
  width: 100%;
  float: right;
}

a {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #333;
}

#nav {
  float: right;
  font-family: 'Roboto', sans-serif;
  padding: 2px 6px 0;
  line-height: 100%;
  border-radius: 1em;
  background: white;
  /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF');
  /* for IE */
  background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF));
  /* for webkit browsers */
  background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
  /* for firefox 3.6+ */
  border: solid 1px white;
}

#nav li {
  font-family: 'Roboto', sans-serif;
  margin: 0 5px;
  padding: 0 0 8px;
  float: right;
  position: relative;
  list-style: none;
}


/* main level link */

#nav a {
  font-family: 'Roboto', sans-serif;
  color: #353535;
  text-decoration: none;
  display: block;
  padding: 8px 20px;
  margin: 0;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
}


/* sub levels link hover */

#nav ul li:hover a,
#nav li:hover li a {
  font-family: 'Roboto', sans-serif;
  background: none;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}


/* level 2 list */

#nav ul {
  font-family: 'Roboto', sans-serif;
  background: #FFFFFF;
  /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF');
  /* for IE */
  background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF));
  /* for webkit browsers */
  background: -moz-linear-gradient(top, #fff, #FFFFFF);
  /* for firefox 3.6+ */
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  right: 0;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}


/* dropdown */

#nav li:hover>ul {
  font-family: 'Roboto', sans-serif;
  display: block;
}

#nav ul li {
  font-family: 'Roboto', sans-serif;
  float: none;
  margin: 0;
  padding: 0;
}

#nav ul a {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}


/* level 3+ list */

#nav ul ul {
  font-family: 'Roboto', sans-serif;
  right: 181px;
  top: -3px;
}


/* rounded corners for first and last child */

#nav ul li:first-child>a {
  -webkit-border-top-right-radius: 1px;
  -moz-border-radius-topleft: 1px;
  -webkit-border-top-left-radius: 1px;
  -moz-border-radius-topright: 1px;
}

#nav ul li:last-child>a {
  -webkit-border-bottom-right-radius: 1px;
  -moz-border-radius-bottomleft: 1px;
  -webkit-border-bottom-left-radius: 1px;
  -moz-border-radius-bottomright: 1px;
}


/* clearfix */

#nav:after {
  font-family: 'Roboto', sans-serif;
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#nav {
  font-family: 'Roboto', sans-serif;
  display: inline-block;
}

html[xmlns] #nav {
  font-family: 'Roboto', sans-serif;
  display: block;
}

* html #nav {
  height: 1%;
}

.menu_line {
  width: 25px;
  height: 2px;
  background-color: black;
  color: black;
  margin: 4px 0;
}

<nav class="navbar">
  <div id="ABT-Container">
    <ul id="nav">
      <li class="w3-animate-right">
        <a href="#">
          <p class="menu_line"></p>
          <p class="menu_line"></p>
          <p class="menu_line"></p>
        </a>
        <ul>
          <li><a href="#">About US</a>
            <ul>
              <li>
              </li>
            </ul>
          </li>

          <li><a href="#">Multi-Levels</a>
            <ul>
              <li><a href="#">Sales</a>
                <ul>
                  <li><a href="#">Support</a></li>
                </ul>
              </li>
              <li><a href="#">Another Link</a></li>
              <li><a href="#">Department</a>
              </li>
            </ul>
          </li>
      </li>
      </ul>
    </ul>
    </ul>
  </div>
</nav>

Answer 1

您也可以在没有 jquery 的情况下执行此操作，但我个人会添加一些内容以指示某些内容具有子菜单，因为您现在必须尝试找出答案。

let hovering = false;

function toggle(element) {
  const nodes = getChildNodes(element.parentElement);
  const parentNodes = getChildNodes(element.parentElement.parentElement);
  if(parentNodes.length > 1) {
    parentNodes.forEach(function(parentNode) {
      const parentChildNodes = getChildNodes(parentNode);
      if(parentChildNodes.length > 1 && parentChildNodes[1].style.display === 'block' && parentChildNodes[1] !== nodes[1])  {
        parentChildNodes[1].style.display = 'none';
      }
    });
  }
  if(nodes[1].style.display === 'block') {
    nodes[1].style.display = 'none';
  } else {
    nodes[1].style.display = 'block';
  }
}

function getChildNodes(node) {
  let children = new Array();
  for(const child in node.childNodes) {
    if(node.childNodes[child].nodeType == 1) {
      children.push(node.childNodes[child]);
    }
  }
  return children;
}

window.onload = function() {
  // For clicks inside the element
  document.getElementById('menuElement').onclick = function(e) {
    // Make sure the event doesn't bubble from your element
    if (e) { e.stopPropagation(); } 
    else { window.event.cancelBubble = true; }
    // Place the code for this element here
  };

  // For clicks elsewhere on the page
  document.onclick = function() {
    const uls = document.getElementById('nav').getElementsByTagName('ul');
    for (i = 0; i < uls.length; i++) {
      uls[i].style.display = 'none';
    }
  };
};

#ABT-Container  {
  font-family: 'Roboto', sans-serif;
  background: transparent;
  width:100%; float:right;
}

a {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #333;
}

#nav {
  float: right;
  font-family: 'Roboto', sans-serif;
  padding: 2px 6px 0;
  line-height: 100%;
  border-radius: 1em;
  background: white; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
  background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #FFFFFF,  #FFFFFF); /* for firefox 3.6+ */
  border: solid 1px white;
}

#nav li {
  font-family: 'Roboto', sans-serif;
  margin: 0 5px;
  padding: 0 0 8px;
  float: right;
  position: relative;
  list-style: none;
}

/* main level link */
#nav a {
  font-family: 'Roboto', sans-serif;
  color: #353535;
  text-decoration: none;
  display: block;
  padding:  8px 20px;
  margin: 0;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
}

/* level 2 list */
#nav ul {
  font-family: 'Roboto', sans-serif;
  background: #FFFFFF; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */
  background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #fff,  #FFFFFF); /* for firefox 3.6+ */
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  right: 0;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}

/* dropdown */
#nav ul li {
  font-family: 'Roboto', sans-serif;
  float: none;
  margin: 0;
  padding: 0;
}

#nav ul a {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}

/* level 3+ list */
#nav ul ul {
  font-family: 'Roboto', sans-serif;
  right: 181px;
  top: -3px;
}

/* rounded corners for first and last child */
#nav ul li:first-child > a {
  -webkit-border-top-right-radius: 1px;
  -moz-border-radius-topleft: 1px;
  -webkit-border-top-left-radius: 1px;
  -moz-border-radius-topright: 1px;
}

#nav ul li:last-child > a {
  -webkit-border-bottom-right-radius: 1px;
  -moz-border-radius-bottomleft: 1px;
  -webkit-border-bottom-left-radius: 1px;
  -moz-border-radius-bottomright: 1px;
}

/* clearfix */
#nav:after {
  font-family: 'Roboto', sans-serif;
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#nav {
  font-family: 'Roboto', sans-serif;
  display: inline-block;
}

html[xmlns] #nav {
  font-family: 'Roboto', sans-serif;
  display: block;
}

* html #nav {
  height: 1%;
}

.menu_line{
  width: 25px;
  height: 2px;
  background-color: black;
  color: black;
  margin: 4px 0;
}

<nav class="navbar">
  <div id="ABT-Container">
    <ul id="nav">
      <li class="w3-animate-right" id="menuElement">
        <a href="#" onclick="toggle(this)">
          <p class="menu_line"></p>
          <p class="menu_line"></p>
          <p class="menu_line"></p>
        </a>
        <ul>
          <li>
            <a href="#" onclick="console.log('about us clicked')">About US</a>
            <ul>
              <li></li>
            </ul>
          </li>
          <li>
            <a href="#" onclick="toggle(this)">Multi-Levels</a>
            <ul>
              <li>
                <a href="#" onclick="toggle(this)">Sales</a>
                <ul>
                  <li>
                    <a href="#" onclick="console.log('support clicked')">Support</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" onclick="console.log('another link clicked')">Another Link</a>
              </li>
              <li>
                <a href="#" onclick="console.log('department clicked')">Department</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" onclick="toggle(this)">Multi-Levels2</a>
            <ul>
              <li>
                <a href="#" onclick="toggle(this)">Sales2</a>
                <ul>
                  <li>
                    <a href="#" onclick="console.log('support2 clicked')">Support2</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" onclick="toggle(this)">Sales3</a>
                <ul>
                  <li>
                    <a href="#" onclick="console.log('support clicked3')">Support3</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" onclick="console.log('another link2 clicked')">Another Link2</a>
              </li>
              <li>
                <a href="#" onclick="console.log('department clicked2')">Department2</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>                 
</nav>

编辑:现在也关闭点击菜单上的某个地方。