Question

我正在尝试使用JS创建一个菜单，当我点击第一个菜单项并且它打开时，我希望当我点击下一个项目时我希望第一个关闭，第二个打开和当我点击打开的菜单项时，我希望它关闭。当我点击任何地方，如果我可以让它关闭... 这里是我的代码 HTML

<div class="container-header">
  <div class="navbar">
    <ul>
      <li>
        <a onclick="dropdownToggle(event)"><span>Products</span></a>
        <div class="dropdown">
          <ul class="submenu-img">
            <li><a><img src="2015_images/img.png">title</a></li>
            <li><a><img src="2015_images/img.png">title</a></li>
            <li><a><img src="2015_images/img.png">title</a></li>
            <li><a><img src="2015_images/img.png">title</a></li>
            <li><a><img src="2015_images/img.png">title</a></li>
          </ul>
        </div>
      </li>
      <li><a onclick="dropdownToggle(event)"><span>Services</span></a>
        <div class="dropdown">
          <ul class="submenu">
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
          </ul>
        </div>
      </li>
      <li><a onclick="dropdownToggle(event)">     <span>Softwares</span></a>
        <div class="dropdown">
          <ul class="submenu">
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
          </ul>
        </div>
      </li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
}
ul {
  list-style: none;
}

.navbar {
  width: 100%;
  text-align: center;
  position: absolute;
  top: -500px;
  background-color: #585859;
  transition: top 0.3s;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .navbar {
    line-height: 65px;
    width: auto;
    position: static;
  }
}
.navbar ul {
  margin: 0;
  padding: 0;
}
.navbar li {
  vertical-align: middle;
  color: #fff;
  padding: 10px;
  border-bottom: 5px solid #fff;
}

@media screen and (min-width: 768px) {
  .navbar li {
    display: inline-block;
    margin-right: 10px;
    border: none;
    padding: 0;
  }
}
.dropdown {
  display: none;
}

.dropdown-open {
  display: block;
  position: absolute;
  top: 70px;
  left: 0;
  background: rgba(88, 88, 89, 0.7);
  width: 100%;
}
.submenu {
  width: 100%;
  display: flex;
  align-items: center;
  flex-flow: row;
  justify-content: center;
  padding: 10px 0 !important;
}
.submenu li {
  margin: 0 2px;
  flex: 0 0 12%;
  line-height: normal;
}

和JS

function dropdownToggle(event) {
  var dropdownItem = event.target.parentElement.parentElement.getElementsByClassName("dropdown")[0];
  if (dropdownItem.classList.contains("dropdown-open")) {
    var dropdowns = document.querySelectorAll(".dropdown");
    var arrayLength = dropdowns.length;
     for (var i = 0; i < arrayLength; i++) {
        dropdowns[i].classList.remove("dropdown-open");
      }
    }

    else {
      dropdownItem.classList.toggle("dropdown-open");
    }
}

我尝试使用JSFiddle，但它没有工作，所以这里也是一个codepen .. http://codepen.io/nnns/pen/rLvdgE

Answer 1

最好的方法是放

var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
    dropdowns[i].classList.remove("dropdown-open");
}

在一个函数中，并在function dropdownToggle(event)的开头调用它，所以每当你调用函数时，你都会关闭所有内容并打开你想要的东西。

修改

这样做：

function dropdownToggle(event) { var dropdownItem =event.target.parentElement.parentElement.getElementsByClassName("dropdown")[0]; var dropdowns = document.querySelectorAll(".dropdown"); var arrayLength = dropdowns.length; for (var i = 0; i < arrayLength; i++) { dropdowns[i].classList.remove("dropdown-open"); } dropdownItem.classList.add("dropdown-open"); }

Answer 2

 git merge feature/xxxxxx

这将删除所有下拉列表打开类并切换在a的父（li）中找到的下拉列表。要关闭身体，请点击：

function dropdownToggle(event) {
var dropdownItem = event.target.parentElement.getElementsByClassName("dropdown")[0];    
 dropdownItem.classList.remove("dropdown");
var dropdowns = document.querySelectorAll(".dropdown"); 
var arrayLength = dropdowns.length;   
for (var i = 0; i < arrayLength; i++) {
 dropdowns[i].classList.remove("dropdown-open");

}   
   dropdownItem.classList.toggle("dropdown-open");    
 dropdownItem.classList.add("dropdown");
}

JS菜单，菜单点击关闭菜单

2 个答案: