移動響應菜單按鈕不響應jQuery單擊功能

Question

我目前正在嘗試為我的導航欄創建一個響應菜單按鈕，它似乎沒有響應鼠標單擊。

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

小提琴

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>