ハンバーガーメニューについて jQuery

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

ハンバーガーメニューを作成したいのですがうまく動かないので質問させていただきます。

エラーメッセージ

該当

jQuery のコード↓

<script> $(function(){ $(document).ready(function(){ $("#sp_navi_btn").click(function() { $("#sp_navi_li").slideToggle(); }); }); }); </script>

HTMLのコード↓

<div class="sp_header"> <div class="container"> <h1><a href="#"><img src="./images/top_sp/logo.png"></a></h1> <div class="sp_menu"> <ul> <li><a href="#"><img src="./images/top_sp/fb.png"></a></li> <li class="insta"><a href="#"><img src="./images/top_sp/insta.png"></a></li> <li id="sp_navi_btn"><img src="./images/top_sp/menu_icon.png" id="sp_navi_btn"></li> </ul>

  </div>
</div>
<ul id="sp_navi_li">
      <li><a href="#">ログイン</a></li>
      <li><a href="#">カート</a></li>
      <li><a href="#">マイページ</a></li>
      <li><a href="#">ショッピングガイド</a></li>
    </ul>

</div>のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

$(document).ready(function(){

これはいらないので閉じ});と共に削除してください。

それと

$("#sp_navi_btn").click(function() {

これは

$("#sp_navi_btn").on("click",function() {

としてみてください。