javascript - 当 javascript 应用转换时，父元素发生变化

Question

我正在尝试创建一个侧边菜单导航，当您单击一个按钮时它会滑入和滑出屏幕。我在菜单和按钮周围有一个容器，以便它们一起移动。容器和菜单的宽度是 13%，这很奇怪菜单是主体的 13% 而不是容器。但是，当我单击按钮时，菜单宽度变为容器的 13%，不再是主体的宽度。我希望宽度保持不变，但我不明白为什么要这样做。

注意我为每个屏幕尺寸准备了多个 CSS 表，这就是 function screensize() 在那里的原因。

function navfunction() {
  var z;

  function screensize() {
    if (window.innerWidth < 600) {
      z = "translateX(-50%)";
    } else {
      z = "translateX(-15%)";
    }

    if (window.innerWidth > 1650) {
      z = "translateX(-13%)";
    } else {
      z = z;
    }
  }

function navmove() {
    var x = document.getElementsByClassName("navanimate")[0];
    if (x.style.transform === "none") {
      x.style.transform = z;
    } else {
      x.style.transform = "none";
    }
  }
  screensize();
  navmove();
}

.nav {
  display: inline-block;
  background-color: #efefef;
  padding: 0px 0px 0px 0px;
  width: inherit;
  position: fixed;
  overflow: hidden;
  height: 100%;
  border-right: 2px solid #bababa;
}

.navanimate {
  transition: transform .8s;
  transition-timing-function: ease-out;
  position: fixed;
  height: 100%;
  width: 15%;
  background-color: red;
  padding-right: 0px;
}

.centernav {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-51%);
}

.menupic {
  position: fixed;
  width: 35px;
  height: 35px;
  cursor: pointer;
  top: 49%;
  left: 15%;
  background-color: #efefef;
  border: 2px solid #bababa;
  border-left: none;
  padding: 12px 0px 12px 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.navop {
  display: inline-block;
  color: black;
  text-decoration: none;
  font-family: verdana;
  font-size: 17px;
  margin: 0px 0px 0px 0px;
  padding: 15px 0px 15px 15px;
  width: 100%;
}

.navop:hover {
  background-color: white;
}

<span class="navanimate" style="transform:none;">
    <span class="nav">
    <span class="centernav">
    <span class="current"><a class="navop" href="index.html">Home</a></span><br>
<a class="navop" href="about.html">About Us</a><br><a class="navop" href="documents.html">Documents</a><br><a class="navop" href="events.html">Events and <span class="navbreaker"></span>Calendar</a>
<br><a class="navop" href="contact.html">Contact Info</a><br><a class="navop" href="clubhouse.html">Clubhouse</a><br><a class="navop" href="index.html">Architectural <span class="navbreaker"></span>Control</a>
<br><a class="navop" href="index.html">Dues</a><br><a class="navop" href="index.html">Parking</a><br><a class="navop" href="index.html">Pool</a>
<br><a class="navop" href="index.html">Trash and Recycle</a>
</span>
</span>

<img src="menupic.png" class="menupic" onclick="navfunction()">
</span>

Answer 1

我认为您可以通过 javascript 做一件事情:添加和删除 open 类。

您应该能够使用 CSS 实现的所有其他内容。

function navfunction() {
  document.querySelector('.nav.animate').classList.toggle('open')
}

body,
html {
  margin: 0;
}

.nav {
  position: fixed;
  height: 100%;
  width: 15%;
  background-color: red;
}
.nav.open {
  transform: translatex(-100%);
}
.nav.animate {
  transition: transform 0.8s;
}
.nav-button {
  display: block;
  background: black;
  position: absolute;
  width: 35px;
  height: 35px;
  cursor: pointer;
  top: 50%;
  transform: translatey(-17px);
  right: -35px;
  border: none;
}
.nav-item {
  display: block;
}

<div class="nav animate">
  <div class="nav-items">
    <a class="nav-item" href="index.html">Home</a>
    <a class="nav-item" href="about.html">About Us</a>
    <a class="nav-item" href="documents.html">Documents</a>
    <a class="nav-item" href="events.html">Events and Calendar</a>
    <a class="nav-item" href="contact.html">Contact Info</a>
    <a class="nav-item" href="clubhouse.html">Clubhouse</a>
    <a class="nav-item" href="index.html">Architectural Control</a>
    <a class="nav-item" href="index.html">Dues</a>
    <a class="nav-item" href="index.html">Parking</a>
    <a class="nav-item" href="index.html">Pool</a>
    <a class="nav-item" href="index.html">Trash and Recycle</a>
  </div>
  <button class="nav-button" onclick="navfunction()"></button>
</div>