导航栏切换 JavaScript

Question

我想制作切换导航，但不幸的是不起作用

function navtoggle(){
            document.getElementsByClassName('sidebar').classList.toggle('active');
        }
    </script>

.sidebar.active {
    width:0px;
}

Answer 1

document.getElementsByClassName('sidebar'(.classList 是一个 HTMLCollection，你必须遍历它或选择一个特定的索引

function navtoggle(){
    document.getElementsByClassName('sidebar')[0].classList.toggle('active');
}

.active {
  color: red;
}

<div class="sidebar">Hello</div>
<button onClick="navtoggle();">Click Me</button>

Answer 2

document.getElementsByClassName()将返回一个HTMLCollection，而不是你尝试定位的单个侧边栏元素。由于classList不是 HTMLCollection 的属性，因此在尝试切换此集合上的类时，只会收到 TypeError。

如果您确定页面上只有一个带有.sidebar的元素，或者您尝试定位的侧边栏是 DOM 中的第一个，则可以使用 document.getElementsByClassName('sidebar')[0] .另一种方法是使用 document.querySelector('.sidebar') ，您还可以传递更具体的选择器，例如 document.querySelector('aside.sidebar') ，以确保您选择了正确的元素。例如：

function navtoggle() {
  document.querySelector('aside.sidebar').classList.toggle('active');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  width: 100vw;
  height: 100vh;
}
.sidebar {
  background: #CCC;
  width: 15%;
  height: 100%;
  padding: 1rem;
  overflow: hidden;
}
.sidebar.active {
  width: 0;
  padding: 0;
}
main {
  position: absolute;
  right: 0;
  top: 0;
  width: 85%;
  height: 100%;
  padding: 1rem;
}
button {
  padding: .5rem;
  margin-top: .5rem;
}

<aside class="sidebar">
  This is the sidebar
</aside>
<main>
  This is not the sidebar <br>
  <button onclick="navtoggle()">Toggle the sidebar</button>
</main>