javascript - 子菜单的问题

Question

我有一个带有子菜单的菜单。子菜单在单击时打开，但在单击另一个时不关闭。始终应该一次显示一个子菜单，我希望当我单击菜单中的另一个列表时，我已经打开的子菜单会自动关闭(而不是保持打开状态)，我该怎么办？

为了解决这些问题:

有人说:你必须更改 html 代码并将/ul 放在 html 代码的末尾。

其他人说:您可以遍历所有相关元素并将它们设置为先显示:无，然后为您实际要打开的元素设置 block ；或者您记得最后打开的元素是在一个变量中，然后专门只重置它。

我做了所有这些，但它仍然不起作用，或者我不知道如何使用这些 guids，如果可能的话，你能更正我的代码吗？老实说，我太困惑了，我不知道我能做什么。

代码:

document.addEventListener('click', function(event) {
  if (event.target.closest('.nav')) {
    return;
  } else {
    document.querySelector('#subMenu').style.display = 'none';
    // I added an ID to the inner unordered list
  }
});

function toggle(element) {
  const nodes = getChildNodes(element.parentElement);
  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;
}

#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 .current a, .nav li:hover>a {
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  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+ */
  color: #444;
  border-top: solid 1px #FFFFFF;
  /*-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        text-shadow: 0 1px 0 rgba(255, 255, 255, .8);*/
}

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

.nav ul a:hover {
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  background: #ff4718 !important;
  /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4718', endColorstr='#FF0000');
  /* for IE */
  background: -webkit-gradient(linear, right top, right bottom, from(#ff4718), to(#FF0000)) !important;
  /* for webkit browsers */
  background: -moz-linear-gradient(top, #ff4718, #FF0000) !important;
  /* for firefox 3.6+ */
  color: #fff !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

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

/* main level link */

.nav a {
  text-decoration: none;
  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 {
  text-decoration: none;
  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;
}

.expand {
  font-size: 24px;
  float: left;
  margin: 0px -5px;
}

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

<nav id="bg1" class="navbar">
  <div id="ABT-Container">
    <ul class="nav" id="dropdown">
      <li class="w3-animate-right">
        <a href="#" onclick="toggle(this)">
          <p class="menu_line"></p>
          <p class="menu_line"></p>
          <p class="menu_line"></p>
        </a>
        <ul id="subMenu">
          <li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">&#x25C2;</span>Our Technology</a>
            <ul>
              <li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">&#x25C2;</span>Sub-Row</a>
                <ul>
                  <li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
                  <li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
                  <li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
                  <li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
                  </a>
              </li>
              </ul>
          </li>
          <li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">&#x25C2;</span>Sub-Row</a>
            <ul>
              <li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 2 clicked')">Sub Sub-Row 2</a></li>
            </ul>
          </li>
          <li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row clicked')">Sub-Row</a></li>
          <li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row clicked')">Sub-Row</a></li>
          </ul>
      </li>

      <li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">&#x25C2;</span>Multi-Levels</a>
        <ul id="dropdoswn">
          <li class="w3-animate-right"><a href="#" onclick="console.log('Team clicked')">Team</a>
            <ul>
              <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a></li>
              <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a>
                <ul>
                  <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 11 clicked')">Sub-Level Item 11</a></li>
                  <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 22 clicked')">Sub-Level Item 22</a></li>
                  <li><a href="#" onclick="console.log('Sub-Level Item 33 clicked')">Sub-Level Item 33</a></li>
                </ul>
              </li>

              <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a></li>
            </ul>
          </li>
          <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Sales clicked')">Sales</a></li>
          <li class="w3-animate-right"><a href="#" onclick="console.log('Another Link clicked')">Another Link</a></li>
          <li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">&#x25C2;</span>Department</a>
            <ul>
              <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
              <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
              <li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="w3-animate-right"><a href="#">Services</a></li>
      <li class="w3-animate-right"><a href="#">About US</a></li>
      <li class="w3-animate-right"><a href="#">Contact US</a></li>
      <li class="w3-animate-right"><a href="#">Our Links</a></li>
      </li>
      </ul>
    </ul>
    </ul>
  </div>
</nav>

Answer 1

标记:

    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">

  </head>

  <body>

    <ul class="menu-wrapper" tabindex="-1">
      <li class="menu" >
        <div>Menu 1</div>
      </li>
      <ul class="sub-menu">
        <li>sub1</li>
        <li>sub2</li>
      </ul>
      <li class="menu">
        <a>Menu 2</a>
      </li>
      <ul class="sub-menu">
        <li>sub1</li>
        <li>sub2</li>
      </ul>
    </ul>
  </body>
  <script src="script.js"></script>
</html>

Javascript 代码:

var menuWrapper = document.getElementsByClassName('menu-wrapper')[0];
menuWrapper.addEventListener("blur", onBlur);

var elmnts = document.getElementsByClassName("menu");
for (var i = 0; i < elmnts.length; i ++){


    elmnts[i].addEventListener("click", onClick);

}
function reset(){
  for (var i = 0; i < elmnts.length; i ++){

      elmnts[i].className =  elmnts[i].className.replace(/active/g, "") //remove active class
  }  
}
function onClick(){
   console.log('focus');

    var classes = this.className.split(" ");
    if(classes.indexOf("active") == -1){
        reset();
        this.className += " active"; //active is the class name of menu the got clicked
    } else{
      this.className = this.className.replace(/active/g, "") //remove active class
    }

}
function onBlur(){
  reset();
}

CSS:

.menu .sub-menu{ display: none}
.menu.active .sub-menu{display: block}

演示: https://plnkr.co/edit/c48ibIycPRN0XC4Bx1GT

希望这对您有所帮助!