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>

导航栏切换JavaScript

2 个答案: