从根本上讲，发生的事情是浏览器未能找到具有ID“ mysidebar”的元素（因此，当您尝试访问 style <时，错误“无法读取property'null''属于null'的属性' /代码>该元素的属性）。 但是，该元素显然在您的html中，并且事件连接时间没有问题，因为您使用 onclick 属性。

换句话说，换句话说，某事加起来。 这里相关的所有内容是：

和：

如果您刚拥有，则应该看到MySidebar登录。当您单击按钮时，如果发生这种情况时，您就不应该遇到有关“无法读取属性'null'style'的错误”（参考 docuct.getElementById（“ mysidebar”） 为null） 。

如果您这样做，则一定有错别字或我们没有看到的东西。

创建一个类 close ，其宽度为 width: 0px ，您可以使用对象的 classList 属性来检查该对象是否包含类 close ，从而检查该对象是关闭还是打开。

function openNav(){
  let a = document.querySelector('#mySidebar')
  if(a.classList.contains('close')){
    a.classList.remove('close')
  }else{
    a.classList.add('close')
  }
}

.sidenav {
  height: 100%;
  /* Full-height: remove this if you want "auto" height */
  width: 250px;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: ;
  /* 0 to Stay at the top */
  left: 0;
  background-color: #1b1b1b;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidebar */
}
.close{
 width: 0px;
}

<button class="openbtn" onclick="openNav()">&#9776; Toggle Sidebar</button>
<div id="mySidebar" class="sidenav">
  <a href="#">Auto &amp; Vehicale</a>
  <a href="#">Beuty &amp; Fashion</a>
  <a href="#">Comedy</a>
  <a href="#">Education</a>
  <a href="#">Entertainment</a>
  <a href="#">Film &amp; Animation</a>
  <a href="#">Food</a>
  <a href="#">Gaming</a>
  <a href="#">How-To</a>
  <a href="#">Music</a>
  <a href="#">News &amp; Politics</a>
  <a href="#">Nonprofits &amp; Activism</a>
  <a href="#">People &amp; Blogs</a>
  <a href="#">People &amp; Animals</a>
  <a href="#">Technology</a>
</div>

您显示的代码没有您提到的错误。它意味着 document.getElementById('mySidebar') 在您的 HTML 中找不到具有该 id 值的任何元素。

除此之外，为什么您的代码示例没有切换：

每次单击按钮时，您都需要 反转 x 。目前，您在 if 情况下将其设置为 false ，但在 else 情况下从未将其重新设置为 true 。

var x = true;

function openNav() {
  if (x == true) {
    document.getElementById("mySidebar").style.width = "250px";
  } else {
    document.getElementById("mySidebar").style.width = "0";
  }
  x = !x;
}

.sidenav {
  height: 100%;
  /* Full-height: remove this if you want "auto" height */
  width: 250px;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: ;
  /* 0 to Stay at the top */
  left: 0;
  background-color: #1b1b1b;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidebar */
}

<button class="openbtn" onclick="openNav()">&#9776; Toggle Sidebar</button>
<div id="mySidebar" class="sidenav">
  <a href="#">Auto &amp; Vehicale</a>
  <a href="#">Beuty &amp; Fashion</a>
  <a href="#">Comedy</a>
  <a href="#">Education</a>
  <a href="#">Entertainment</a>
  <a href="#">Film &amp; Animation</a>
  <a href="#">Food</a>
  <a href="#">Gaming</a>
  <a href="#">How-To</a>
  <a href="#">Music</a>
  <a href="#">News &amp; Politics</a>
  <a href="#">Nonprofits &amp; Activism</a>
  <a href="#">People &amp; Blogs</a>
  <a href="#">People &amp; Animals</a>
  <a href="#">Technology</a>
</div>