将切换开关更改为默认打开

Question

当单击菜单图标并通过单击 X 图标关闭时，我有一个侧边栏，我想反转这些操作，以便默认情况下打开侧边栏，我尝试过使用脚本，但我可以似乎没有弄清楚我哪里出错了。

任何帮助表示赞赏！

<script>
function toggleNav() {
    var sidenav = document.getElementById("mySidenav"),
    main = document.getElementById("main");
    sidenav.style.width = sidenav.style.width === "300px" ? '0' : '300px';
    innerwrapper.style.marginLeft = innerwrapper.style.marginLeft === "300px" ? '0' :  '300px';
}   
</script>

sidenav 的 CSS

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 60px;
  left: 0;
  background: rgba(7, 3, 17, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

切换按钮代码

<span style="font-size:16px;cursor:pointer" onclick="toggleNav()"><i onclick="myFunction(this)" class="fas fa-times" title="Toggle Sidebar"></i></span>

mySidenav 是侧边栏，innerwrapper 是侧边栏打开时移到一边的内容。

提前谢谢你！

Answer 1

我认为你可以使用 CSS 类。

例如，在您的情况下，您可以创建两个类：

• .sidenav 用于您的 sidenav 的默认样式（以及隐藏时）
• .sidenav--open 当你的 sidenav 打开时的特定样式

然后您可以选择将 sidenav--open 类添加和删除到侧边栏元素。为此，您可以使用element.classList.toggle() JS 方法。

我认为这会奏效：

let sidenav = document.getElementById("sidenav");

function toggleSidenav() {
  sidenav.classList.toggle("sidenav--open");
}

.sidenav {
  position: fixed;
  height: 100%;
  width: 0;
  top: 60px;
  left: 0;
  margin-left: 0;
  padding-top: 60px;
  background: rgba(7, 3, 17, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
  z-index: 1;
}

.sidenav--open {
  width: 300px;
  margin-left: 300px;
}


@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  
  .sidenav a {
    font-size: 18px;
  }
}

<div id="sidenav" class="sidenav sidenav--open"></div>

<span style="font-size:16px;cursor:pointer" onclick="toggleNav()">
  <i onclick="myFunction(this)" class="fas fa-times" title="Toggle Sidebar"></i>
</span>