Question

我正在尝试制作幻灯片菜单，但是我不知道如何将其关闭。

基本上，我正在尝试做类似此网站https://zero.nyc/

的操作

const menu = document.querySelector('aside');
const nav = document.querySelector('nav');

menu.addEventListener('click', () => {
  nav.style.marginLeft = '0';
  menu.style.left = '97vw';
})

aside {
  border-right: 1px solid #e2e2e2;
  width: 3vw;
  height: 100vh;
  line-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: 1s;
}

nav {
  width: 97vw;
  height: 100vh;
  margin-left: -100vw;
  transition: 1s;
}

<aside>
  menu
</aside>
<nav>
  <ul>
    <li>Home</li>
    <li>ABOUT</li>
    <li>Contact</li>
  </ul>
</nav>

Answer 1

我会创建css类来在您的click事件处理程序中进行切换，而不是手动更改样式。

点击后，您基本上会去：

获取要更改的元素
使用classList.toggle切换类（如果您不担心

使用类的好处是，一旦删除它，该元素将简单地还原。它也更易于维护，因为您不必跟踪更改的样式。

Answer 2

使用css类并在您的click方法中打开或关闭它们，而不是通过javascript设置样式。

摘要：

const menu = document.querySelector('aside');
const nav = document.querySelector('nav');

menu.addEventListener('click', () => {
  nav.classList.toggle("margin");
  menu.classList.toggle("left");
})

aside {
  border-right: 1px solid #e2e2e2;
  width: 3vw;
  height: 100vh;
  line-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
}

nav {
  width: 97vw;
  height: 100vh;
  margin-left: -100vw;
  transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
}

.margin {
  margin-left: 0;
}

.left {
  left: 97vw;
}

<aside>
  menu
</aside>
<nav>
  <ul>
    <li>Home</li>
    <li>ABOUT</li>
    <li>Contact</li>
  </ul>
</nav>

Answer 3

使用transform: translateX()代替边距。您还必须编写菜单的某些状态，即打开/关闭。您可以为此使用css类，并在eventListener中检查菜单是否为opened，然后onClick将动画从translateX(0)切换到translateX(-100%)并删除opened类。 / p>

或者您可以编写带有过渡的样式或@keyframes动画，一切都将起作用。只需建立先存储打开状态的想法即可。

如何切换打开和关闭菜单

3 个答案: