移动响应式菜单按钮不响应jquery点击功能

Question

我目前正在尝试为导航栏创建一个响应式菜单按钮，它似乎没有响应鼠标点击。

$("span.nav-btn").click(function()
    $("ul.nav-toggle").slidetoggle();
})

Fiddle

Answer 1

您的JS有语法错误。在第一行缺少{，方法名称slideToggle（大写字母为“T”）。

$("span.nav-btn").click(function() {  // <== HERE ===
  $("ul.nav-toggle").slideToggle();
});

Answer 2

<强>问题：

• 点击功能缺少大括号{
• jQuery区分大小写，因此slidetoggle应为slideToggle

备注

• 在你的小提琴中没有加载jQuery库

$("span.nav-btn").click(function() {
  $("ul.nav-toggle").slideToggle();
})

#nav {
  background-color: #6a5750;
  padding-top: .01%;
  position: fixed;
  width: 100%;
  text-align: center;
}
#nav li {
  display: inline-block;
}
#nav li a {
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  color: #FFFFFF;
  -o-transition: .3s;
  -ms-transitiion: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
#nav a:hover {
  color: #FF0000;
}
@media (max-width: 800px) {
  #nav {
    text-align: left;
  }
  #nav li {
    display: block;
  }
  .nav-btn {
    display: block;
    background-color: #6a5750;
    color: #FFFFFF;
    text-align: center;
  }
  .nav-btn:before {
    content: "Menu"
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-scroll-header id="nav">
  <span class="nav-btn"></span>
  <ul class="nav-toggle">
    <li><a data-scroll href="#home">Home</a>
    </li>
    <li><a data-scroll href="#html">HTML</a>
    </li>
    <li><a data-scroll href="#css">CSS</a>
    </li>
    <li><a data-scroll href="#video">Video</a>
    </li>
    <li><a data-scroll href="#about">About</a>
    </li>
    <li><a data-scroll href="#contact">Contact</a>
    </li>
  </ul>