时间戳

首页 > 解决方案 > 适用于 codepen.io，但不适用于 Visual Code Studio？

javascript - 适用于 codepen.io，但不适用于 Visual Code Studio？

问题描述

这行代码在 codepen.io 中有效，但在 Visual Code Studio 中无效。当我在 chrome 中打开一个带有 js 链接的 html 文件时，会显示一个错误，即我的 var nav 为空，但是当我使用 codepen.io 中的代码时。该代码有效。当您单击时，我试图让侧边栏出现和消失

let nav = document.querySelector('nav')
function toggleNav() {
  if (nav.classList.contains('is-open')) {
    nav.classList.remove('is-open')
  } else {
    nav.classList.add('is-open')
  }
}

这是hmtl：

<button onclick="toggleNav()"> Click me for side bars </button>
<nav class="" >
    <a href="#">This is a link</a>
    <a href="#">This is a link</a>
    <a href="#">This is a link</a>
    <a href="#">This is a link</a>        
</nav>

如果你想看看什么是开放的，这里是 css：

body {overflow:hidden}
a {
    border-width: 2px 4px 2px 4px ;
    text-decoration: none;
    margin: 0px;
    margin-top: 10px;
    padding: 5px;
    display: block;
    width: auto;
    height: 30px;
    border: solid brown;
    color: brown;
    background-color: darkgrey;
    margin: 0px;
}

.is-open {
    transform: translateX(-300px);
}

标签： javascript

解决方案

推荐阅读