Question

我得到这个＆＃34;未捕获的ReferenceError：未定义toggleSidebar 在HTMLDivElement.onclick＆＃34;我试图打开侧边栏时出错。它在codepen中工作，但在我的网站上它似乎没有工作！我的网站：Skintheft.com/SufferSite

索引代码示例 -

* {
    margin:0px;
    padding:0px;
    font-family:sans-serif;
}


#sidebar { 
  position:fixed;
  width:200px;
  height:100%;
  background:#727e87;
  left:-200px;
  transition: all 250ms linear;

}

#sidebar.active {
    left:0px;
}

#sidebar ul li {
  color:rgba(230,230,230,0.9);
  list-style:none;
  padding:15px 10px;
  border-bottom: 1px solid rgba(100,100,100,0.3);
}

#sidebar .toggle-btn {
    position:absolute;
    left:230px;
    top:20px;
}

#sidebar .toggle-btn span {
    display:block;
    width:30px;
    height:5px; 
    background:#727e87;
    margin: 5px 0px;
}

css文件：

function toggleSidebar(){
    document.getElementById("sidebar").classList.toggle('active');
}

最后但并非最不重要的是javascript

{{1}}

我个人对如何解决这个问题一无所知，我将非常感谢任何帮助！感谢：）

Answer 1

您提供的代码完全正常。我在你的网站上看到的唯一问题是你提供的以下JS包含在网站的引号中，请更改它，切换工作正常。

我说的是以下代码。

JS之前：

"
function toggleSidebar() {
  document.getElementById("sidebar").classList.toggle('active');
}
"

JS After：

<script>
function toggleSidebar() {
  document.getElementById("sidebar").classList.toggle('active');
}
</script>

您收到错误的原因是因为在HTML中。

<div class="toggle-btn" onclick="toggleSidebar()">

正在搜索以下功能，但无法找到它。

＆＃13;

function toggleSidebar() {
  document.getElementById("sidebar").classList.toggle('active');
}

＆＃13;

* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

#sidebar {
  position: fixed;
  width: 200px;
  height: 100%;
  background: #727e87;
  left: -200px;
  transition: all 250ms linear;
}

#sidebar.active {
  left: 0px;
}

#sidebar ul li {
  color: rgba(230, 230, 230, 0.9);
  list-style: none;
  padding: 15px 10px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}

#sidebar .toggle-btn {
  position: absolute;
  left: 230px;
  top: 20px;
}

#sidebar .toggle-btn span {
  display: block;
  width: 30px;
  height: 5px;
  background: #727e87;
  margin: 5px 0px;
}

＆＃13;

<div id="sidebar">
  <div class="toggle-btn" onclick="toggleSidebar()">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul>

    <li>Home </li>
    <li>Contact </li>
    <li>About </li>

  </ul>

＆＃13;

未捕获的ReferenceError：未定义toggleSidebar

1 个答案: