jQuery菜单未切换类别名称

时间：2019-03-15 13:33:55

标签： javascript jquery html css

菜单未切换。单击切换按钮时，我在JavaScript中看到以下错误：

  "message": "Uncaught TypeError: Cannot read property 'toggle' of undefined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 159,
  "colno": 44
}


//java.js
function toggleMenu() {
  document.getElementById('Menu').classlist.toggle('active');
}
* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

#Menu {
  padding: 0px;
  position: fixed;
  width: 400px;
  height: 100%;
  background: #00ff00;
  left: -400px;
}

#Menu.active {
  display: 0px;
}

#menu ul li {
  color: rgba(230, 230, 230, 0.9);
  list-style: none;
  padding: 15px 10px;
  top: 40px;
  position: relative;
  width: 200px;
  vertical-align: middle;
  cursor: pointer;
  background-color: #00ff00;
  border-top: 4px solid #ff0000;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#Menu .toggle-btn {
  position: absolute;
  left: 410px;
  top: 65px;
}

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

#menu ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}

#menu ul li:hover {
  background-color: #000;
}

#menu>ul>li {
  border-right: 4px solid #ff0000;
  border-left: 2px solid #000;
}

.bottom {
  border-bottom: 4px solid #ff0000;
}

#menu ul ul {
  transition: all 0.3s;
  opacity: 0;
  position: absolute;
  border-left: 4px solid #ff0000;
  border-bottom: 4px solid #ff0000;
  border-right: 4px solid #ff0000;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

#menu ul li:hover>ul {
  opacity: 1;
  visibility: visible;
}

#Menu ul li a {
  text-decoration: none;
}

i {
  margin-left: 15px;
}

#menu>ul>li:nth-of-type(3)::after {
  content: "+";
  position: absolute;
  margin-left: 60%;
  color: #fff;
  font-size: 18px;
}

#menu>ul>li:nth-of-type(2)::after {
  content: "+";
  position: absolute;
  margin-left: 56%;
  color: #fff;
  font-size: 18px;
}
<!doctype html>
<html>

<head>
  <title>vertical menu with css</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <script src="java.js"></script>
</head>

<body>
  <div id="Menu">
    <div class="toggle-btn" onclick="toggleMenu()">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <li><a href="#"><i class="fas fa-home">Hjem</i></a></li>
      <li><a href="#"><i class="fas fa-user-tie">Bjørn</i></a>
        <ul>
          <li><a href="#">børn 1 </i></a></li>
          <li><a href="#">børn 2 </i> </a></li>
          <li><a href="#">børn 3 </i></a></li>
        </ul>
        <li><a href="#"><i class="fas fa-user">Cille</i></a>
          <ul>
            <li><a href="#">børn 1 </a></li>
            <li><a href="#">børn 2 </a></li>
            <li><a href="#">børn 3 </a></li>
          </ul>
          <li><a href="#"><i class="fas fa-user-tie">David</i></a></li>
          <li class="bottom"><a href="#"><i class="fas fa-user-tie">Fin</i>/a></li>

      </ul>
    </div>
  </body>

</html>

2 个答案:

答案 0 :(得分：1)

那里有很多错误。请将我的版本与您的版本进行比较，您会发现它们之间的差异。

  1. 注意区分大小写（例如classList和classlist，#Menu和#menu）

  2. 请注意正确关闭HTML标签。那里有一些错误。

  3. 删除不必要的元素，例如</i>。可能是复制粘贴遗留下来的。

尽管如此，我还是建议您使用语法高亮工具，即IDE。免费版本例如是 VS Code ， Atom 等。之后，请熟悉语法。 Mozilla Developer Network是社区策划的非常复杂和全面的资源和知识库。

function toggleMenu() {
  document.getElementById('Menu').classList.toggle('active');
}
* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

#Menu {
  padding: 0px;
  position: fixed;
  width: 400px;
  height: 100%;
  background: #00ff00;
  left: -400px;
  transition: left 360ms ease-in;
}

#Menu.active {
  left: 0;
}

#Menu ul li {
  color: rgba(230, 230, 230, 0.9);
  list-style: none;
  padding: 15px 10px;
  top: 40px;
  position: relative;
  width: 200px;
  vertical-align: middle;
  cursor: pointer;
  background-color: #00ff00;
  border-top: 4px solid #ff0000;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#Menu .toggle-btn {
  position: absolute;
  left: 410px;
  top: 65px;
}

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

#Menu ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}

#Menu ul li:hover {
  background-color: #000;
}

#Menu>ul>li {
  border-right: 4px solid #ff0000;
  border-left: 2px solid #000;
}

.bottom {
  border-bottom: 4px solid #ff0000;
}

#Menu ul ul {
  transition: all 0.3s;
  opacity: 0;
  position: absolute;
  border-left: 4px solid #ff0000;
  border-bottom: 4px solid #ff0000;
  border-right: 4px solid #ff0000;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

#Menu ul li:hover>ul {
  opacity: 1;
  visibility: visible;
}

#Menu ul li a {
  text-decoration: none;
}

i {
  margin-left: 15px;
}

#Menu>ul>li:nth-of-type(3)::after {
  content: "+";
  position: absolute;
  margin-left: 60%;
  color: #fff;
  font-size: 18px;
}

#Menu>ul>li:nth-of-type(2)::after {
  content: "+";
  position: absolute;
  margin-left: 56%;
  color: #fff;
  font-size: 18px;
}
<!doctype html>
<html>

<head>
  <title>vertical menu with css</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <script src="java.js"></script>
</head>

<body>
  <div id="Menu">
    <div class="toggle-btn" onclick="toggleMenu()">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <li><a href="#"><i class="fas fa-home">Hjem</i></a></li>
      <li><a href="#"><i class="fas fa-user-tie">Bjørn</i></a>
        <ul>
          <li><a href="#">børn 1</a></li>
          <li><a href="#">børn 2</a></li>
          <li><a href="#">børn 3</a></li>
        </ul>
        <li><a href="#"><i class="fas fa-user">Cille</i></a>
          <ul>
            <li><a href="#">børn 1 </a></li>
            <li><a href="#">børn 2 </a></li>
            <li><a href="#">børn 3 </a></li>
          </ul>
          <li><a href="#"><i class="fas fa-user-tie">David</i></a></li>
          <li class="bottom"><a href="#"><i class="fas fa-user-tie">Fin</i></a></li>

          </ul>
        </div>
      </body>

    </html>

答案 1 :(得分：0)

问题似乎是您没有正确使用classList，它需要像下面这样用驼峰式包装：

function toggleMenu() {
  document.getElementById('Menu').classList.toggle('active');
}

这里也有更多语义上的内容，但是为什么您的文件名为java.js？尝试根据文件执行的功能或封装的功能来命名文件。以后会为您节省一些头痛！

相关问题
最新问题