单击时的Javascript菜单

Question

我有一个带有图像的 div 和一个隐藏的导航栏。当我单击 div 时，我希望它显示隐藏的菜单，但由于某种原因它不起作用。理想情况下，我希望导航栏从右侧滑出，但目前只希望它在我单击按钮时出现。

使用display: none隐藏菜单；我尝试使用 javascript .style 让它重新出现，但由于某种原因它不起作用。

我的代码

var menu = document.querySelectorAll(".navigation-mobile");

function onMenuClick() {
  menu.style.display = "inline";
}

.navigation-mobile {
  display: none;
  list-style-type: none;
  width: 300px;
  overflow: hidden;
  float: right;
  position: relative;
  z-index: 1;
  background-color: #2a3b4d;
  height: 100%;
  top: -20px;
  padding-left: 0;
}

.navigation-mobile a:hover {
  text-decoration: none;
}

.nav-elements-mobile {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  padding: 10px;
  padding-left: 0;
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 1px solid white;
  padding-left: 10px;
}

a .nav-elements-mobile {
  display: block;
  color: #ffffff;
  width: 300px;
}

a .nav-elements-mobile:hover {
  background-color: #243342;
}

.mobile-nav-button {
  display: none;
  position: relative;
  top: 15px;
  right: 25px;
  width: 35px;
  height: 35px;
  float: right;
}

#menu-icon {
  width: 30px;
  height: 30px;
}

.mobile-nav-button:hover {
  cursor: pointer;
}

@media screen and (max-width: 1040px) {
  .navigation {
    display: none;
  }
  .mobile-nav-button {
    display: inline;
  }
}

<div class="mobile-nav-button" onclick="onMenuClick();">
  <img id="menu-icon" src="Images/Home Page/MenuButton.png" />
  <ul class="navigation-mobile">
    <a href="">
      <li class="nav-elements-mobile">Home</li>
    </a>
    <a href="">
      <li class="nav-elements-mobile">Find a Team</li>
    </a>
    <a href="">
      <li class="nav-elements-mobile">Contact Us</li>
    </a>
    <a href="">
      <li class="nav-elements-mobile">Gallery</li>
    </a>
    <a href="">
      <li class="nav-elements-mobile">Forms</li>
    </a>

  </ul>
</div>

Answer 1

document.querySelectorAll 返回所有匹配元素的节点列表。并且节点列表中没有style 的任何属性。您需要的是 document.querySelector，它将只返回第一个匹配的节点，您可以应用样式属性来隐藏、显示或其他任何内容。

或者如果需要，您可以使用 document.querySelectorAll(selector)[0] 获取第一个选择器

附言。如果要添加滑动效果。使用 jquery 会很容易。只需将 menue.style.display=block 替换为 $(".navigation-mobile").slideDown() 即可获得滑动效果

var menu = document.querySelector(".navigation-mobile");

function onMenuClick() {
  menu.style.display = "block";
}

.navigation-mobile {
  display: none;
  list-style-type: none;
  width: 300px;
  overflow: hidden;
  float: right;
  position: relative;
  z-index: 1;
  background-color: #2a3b4d;
  height: 300px;
  top: -20px;
  padding-left: 0;
}

.navigation-mobile a:hover {
  text-decoration: none;
}

.nav-elements-mobile {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  padding: 10px;
  padding-left: 0;
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 1px solid white;
  padding-left: 10px;
}

a .nav-elements-mobile {
  display: block;
  color: #ffffff;
  width: 300px;
}

a .nav-elements-mobile:hover {
  background-color: #243342;
}

.mobile-nav-button {
  display: none;
  position: relative;
  top: 15px;
  right: 25px;
  width: 35px;
  height: 35px;
  float: right;
}

#menu-icon {
  width: 30px;
  height: 30px;
}

.mobile-nav-button:hover {
  cursor: pointer;
}

@media screen and (max-width: 1040px) {
  .navigation {
    display: none;
  }
  .mobile-nav-button {
    display: inline;
  }
}

<div class="mobile-nav-button" onclick="onMenuClick();">
  <img id="menu-icon" src="Images/Home Page/MenuButton.png" />
  <ul class="navigation-mobile">
    <a href="">
      <li class="nav-elements-mobile">Home</li>
    </a>
    <a href="">
      <li class="nav-elements-mobile">Find a Team</li>
    </a>
    <a href="">
      <li class="nav-elements-mobile">Contact Us</li>
    </a>
    <a href="">
      <li class="nav-elements-mobile">Gallery</li>
    </a>
    <a href="">
      <li class="nav-elements-mobile">Forms</li>
    </a>

  </ul>
</div>