更改开关以默认打开

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>

CSS 用于 sidenav

.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 classes.

例如，在您的情况下，您可以创建两个 classes:

.sidenav sidenav 的默认样式（以及隐藏时）
.sidenav--open打开sidenav时的具体样式

然后您可以选择添加和删除 sidenav--open class 到边栏元素。为此，您可以使用 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>

更改开关以默认打开

Change toggle to open by default

javascript

css

toggle