Javascript 为什么不是'；当我关闭导航时，我的转换不起作用吗？

当你点击“汉堡包”图标时，我试图让我的导航从0%转换到20%。它在我打开导航时工作，但在我关闭导航时不工作

下面是一些CSS

    .nav-toggle.active + nav {
width: 20%;
transition: all 500ms ease-in-out;
visibility:visible;
}

nav {
  height: 2em;
  width: 0%;
  line-height: 2em;
  position: absolute; 
  left: 5%; 
  top: 4.5%;
  background: rgba(144, 198, 149, 1);
  border-radius: 5px;
  text-align: center;
  visibility: hidden;
}

我也尝试过同样的方法，但没有“可见性”属性

---

以下是带有汉堡图标的示例，更直观。

之所以只在应用

.active

类时才进行转换，是因为只有在应用

.active

类时才将转换应用于导航和导航栏。将transition属性添加到nav和nav栏，以便在使用和不使用

.active

类的情况下进行转换

---

这是一个。

nav

仅在类处于活动状态时才转换。删除类时，即删除转换<代码>必须在其样式中具有转换：

nav {
  height: 2em;
  width: 0%;
  line-height: 2em;
  position: absolute; 
  left: 5%; 
  top: 4.5%;
  background: rgba(144, 198, 149, 1);
  border-radius: 5px;
  text-align: center;
  visibility: hidden;
  transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
}

---

LOL:D很高兴我能帮上忙。确保添加供应商前缀，以便在所有浏览器中都能正常工作