jquery - 100% 宽度的侧导航面板未展开

Question

我正在创建一个需要 100% 宽度导航面板的元素，但我无法将其展开。当我点击汉堡包按钮时，没有任何反应。我认为它可能是我的 z-index 但是，我试图正确地对所有内容进行分层但无济于事。那么，有人知道发生了什么事吗？

/* Navigation Panel */

.navigation-panel {
  height: 100vh;
  width: 0;
  position: absolute;
  display: block;
  z-index: 1;
  top: 0;
  left: 0;
  background: #901536;
  overflow-x: hidden;
  transition: 0.5s;
}
/* Navigation Bar */

.navigation-bar {
  text-align: right;
  padding: 20px;
  color: #fff;
}
.navigation-bar h3 {
  float: left;
  text-transform: uppercase;
}
.navigation-bar span {
  font-size: 20px;
  cursor: pointer;
}
/* Header Section */

.header {
  height: 80vh;
  background: #fff url(../img/bg.jpg);
  background-size: cover;
  text-align: center;
}

<!-- Navigation Panel -->
<div class="navigation-panel" id="sidenav">
  <a href="javascript:void(0)" onClick="openNav()">&times;</a>
  <a id="active">Home</a>
  <a>Who We Are</a>
  <a>Our Teams</a>
  <a>Catch Us</a>
  <a>Info</a>
</div>

<!-- Header -->
<div class="header">
  <div class="navigation-bar">
    <h3>Central Coast Crushers</h3>
    <span onclick="closeNav()">&#9776;</span>
  </div>
</div>

<!-- Scripts -->
<script>
  function openNav() {
    document.getElementById("sidenav").style.width = "100";
  }

  function closeNav() {
    document.getElementById("sidenav").style.width = "0";
  }
</script>

Answer 1

检查你正在调用的函数......它应该是标题中的openNav()，而不是closeNav() 和 JS 宽度分配中的百分比 (%) 符号应该可以。

function openNav() {
  document.getElementById("sidenav").style.width = "100%";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}

/* Navigation Panel */

body * {
  background-color: black;
}
.navigation-panel {
  height: 100vh;
  width: 0%;
  display: block;
  z-index: 1;
  top: 0;
  position: absolute;
  left: 0;
  background: #901536;
  overflow-x: hidden;
  transition: 0.5s;
}
/* Navigation Bar */

.navigation-bar {
  text-align: right;
  padding: 20px;
  color: #fff;
}
.navigation-bar h3 {
  float: left;
  text-transform: uppercase;
}
.navigation-bar span {
  font-size: 20px;
  cursor: pointer;
}
/* Header Section */

.header {
  height: 80vh;
  background: #fff url(../img/bg.jpg);
  background-size: cover;
  text-align: center;
}

<div class="navigation-panel" id="sidenav">
  <a href="javascript:void(0)" onClick="closeNav()">&times;</a>
  <a id="active">Home</a>
  <a>Who We Are</a>
  <a>Our Teams</a>
  <a>Catch Us</a>
  <a>Info</a>
</div>

<!-- Header -->
<div class="header">
  <div class="navigation-bar">
    <h3>Central Coast Crushers</h3>
    <span onclick="openNav()">&#9776;</span>
  </div>
</div>