移动响应菜单按钮不响应jQuery单击功能

Question

I'm currently trying to create a responsive menu button for my navigation bar, and it does not seem to be responding to a mouse click.

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

Fiddle

Answer 1

Your JS has a syntax error. Missing { at the first line and the method name slideToggle (with capital "T").

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

Answer 2

Problems:

• The click function is missing an opening curly brace {
• jQuery is case-sensitive so slidetoggle , should be slideToggle

Notes

• in your fiddle is not loading the jQuery library

---

 $("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>