メニューアイコンをクリックしたら下にメニューをスライドで表示させたい。

jQueryを使用してアイコンをクリックするとリストが出現する(アイコンが右上にあるので、リストも右寄せで)というメニューを作りたいのですが、上手くできません(クリックしても表示されない)。
調べてもどこが間違っているのかわからなかったので、どなたか教えていただけないでしょうか？
web制作およびjQuery初心者につき、おかしな記述などございましたら、ご指摘いただけるとありがたいです。
何卒よろしくお願いいたします。

●html●

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="sstemp4.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <title>template sample</title>
</head>

<body>
  <header>
    <div id="menu">
      <ul id="menu-list">
        <li><a href="#about">about</a></li><li>
        <a href="#main">main</a></li><li id="sitename">
        <a href="#"><span>Site Name</span></a></li><li>
        <a href="#bookmark">bookmark</a></li><li>
        <a href="#contact">contact</a></li>
      </ul>
    </div>
    
<!--    ここからスマホ・携帯用デザイン-->
    
    <div id="res-header">
      <div id="res-sitename">
        <a href="#">Site Name</a>
      </div>
      <div id="res-menu">
        <div id="res-menu-icon">
          <img src="img/menu.png">
        </div>
        <ul id="res-menu-list">
          <li><a href="#about">about</a></li>
          <li><a href="#main">main</a></li>
          <li><a href="#bookmark">bookmark</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
      <div id="res-top-image">
        <img src="img/nature3.png">
      </div>
    </div>
    
<!--    ここまでスマホ・携帯用デザイン-->
    
  </header>
  
  <div id="wrapper">
    <div id="about" class="link"></div>
    <div class="contents-wrapper">
      <div class="contents">
        <div class="contents-menu">
          <div class="contents-menu-title">
            <h2>about</h2>
            <p>サイトについて</p>
          </div>
        </div>
        <div class="contents-main">
          <div id="site-title">
            Site Name(サイト名)
          </div>
          <p>シンプルなモノクロデザインのテンプレート。</p>
          <p>画面サイズ959px以下でメニューが切り替わります。</p>
          <div class="free-textarea">
            <p>更新履歴などにお使い下さい。</p>
            <p>-2018/02/04 main 追加</p>
            <p>-2018/02/03 main 追加</p>
            <p>-2018/01/30 bookmark 1件追加</p>
            <p>-2018/01/25 main 追加</p>
          </div>
        </div>
      </div>
    </div>
    <div id="main" class="link"></div>
    <div class="contents-wrapper">
      <div class="contents">
        <div class="contents-menu">
          <div class="contents-menu-title">
            <h2>main</h2>
            <p>メインコンテンツ</p>
          </div>
        </div>
        <div class="contents-main">メインコンテンツなど。</div>
      </div>
    </div>
    <div id="bookmark" class="link"></div>
    <div class="contents-wrapper">
      <div class="contents">
        <div class="contents-menu">
          <div class="contents-menu-title">
            <h2>bookmark</h2>
            <p>他サイト様へのリンク</p>
          </div>
        </div>
        <div class="contents-main">
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
        </div>
      </div>
    </div>
    <div id="contact" class="link"></div>
    <div class="contents-wrapper">
      <div class="contents">
        <div class="contents-menu">
          <div class="contents-menu-title">
            <h2>お問い合わせ</h2>
            <p>何かご質問等ございましたらこちらからご連絡ください。</p>
          </div>
        </div>
        <div class="contents-main">
          <form>
            <p>お名前</p>
            <input>
            <p>メールアドレス</p>
            <input>
            <p>お問い合わせ内容</p>
            <textarea></textarea>
            <p>
              <input type="submit">
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  <footer>
  </footer>

<script src="jstemp4.js"></script>
  
</body>
</html>

●css●

@charset "utf-8";

* {
  box-sizing: border-box;
}

/*ここから共通の設定*/

html, body {
  height: 100%;
}

body {
  font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ＭＳ ゴシック', sans-serif;
  font-weight: 500;
  background-image: url(img/wallpaper.png);
  background-attachment: fixed;
}

body, header, h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  transition: 0.2s;
  color: rgb(100,100,100);
}

a:hover {
  opacity: 0.7;
}

header, #wrapper, footer {
  width: 100%;
} 

/*ここまで共通の設定*/


/*ここからスマホ・タブレット用*/

@media (max-width:959px){
  
  h2 {
    margin: 5px 0;
  }
  
  #menu-list {
    display: none;
  }
  
  #poem {
    display: none;
  }
  
  #res-sitename {
    text-align: center;
    padding: 20px;
  }
  
  #res-menu {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: right;
  }
  
  #res-menu-list {
    display: none;
    width: 70%;
  }
  
  #res-top-image img{
    width: 100%;
  }
  
  .contents {
    margin-top: 50px; 
    padding: 5px;
  }
  
  .free-textarea {
    width: 80%;
    height: 100px;
    font-size: 13px;
    padding: 3px;
    margin: 10px 0;
    resize: none;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    color: rgb(255,255,255);
  }
  
  footer {
    margin-top: 30px;
    background-color: rgba(0,0,0,0.7);
    color: rgb(200,200,200);
  }
  
  footer a {
    color: rgb(255,255,255);
  }
}

/*ここまでスマホ・タブレット用*/

/*ここからパソコン用*/

@media (min-width:960px){
  #res-header {
    display: none;
  }
  
  header {
    height: 100%;
    background-image: url(img/nature3.png);
    background-size: cover;
    text-align: center;
    display: table;
  }

  #poem {
    display: table-cell;
    vertical-align: middle;
    font-size: 180%;
    font-weight: 800;
    animation: sizeScale 5s ease 0.5s both;
    animation-iteration-count: 1;
    pointer-events: none;
  }

  #menu-list {
    width: 100%;
    list-style: none;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    position: fixed;;
    top: 0;
    left :0;
  }

  #menu-list li {
    display: inline-block;
  }

  #menu-list li a{
    display: block;
    padding: 15px;
    color: rgb(255,255,255);
  }

  #sitename span::before {
    content: "│";
    color: rgb(200,200,200);
  }

  #sitename span::after {
    content: "│";
    color: rgb(200,200,200);
  }

  .link {
    height: 70px;
    margin-top: 150px;
  }

  .contents-wrapper {
    width: 100%;
    padding: 50px;
    background-color: rgb(255,255,255);
  }

  .contents {
    display: table;
    margin: 0 auto;
    overflow: hidden;
  }

  .contents-menu {
    width: 200px;
    display: table-cell;
    vertical-align: top;
    text-align: center;
  }

  .contents-menu-title {
    height:200px;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(0,0,0,0.1);
    border: solid 1px rgba(0,0,0,0.5);
    border-radius: 100%;
    padding: 5px;
  }

  .contents-menu-title p {
    font-size: 70%;
  }

  .contents-main {
    display: table-cell;
    padding: 0 20px;
    width: 700px;
  }

  #site-title{
    font-size: 25px;
    margin-bottom: 20px;
  }

  .free-textarea {
    width: 500px;
    height: 100px;
    font-size: 13px;
    padding: 3px;
    margin: 10px 0;
    resize: none;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    color: rgb(255,255,255);
  }

  .bookmark-list {
    margin-bottom: 10px;
  }

  form input, form textarea {
    width: 300px;
  }

  form textarea {
    height: 200px;
    background-color: rgb(255,255,255);
  }

  footer {
    text-align: center;
    margin: 50px 0;
  } 
}

/*ここまでパソコン用*/


/*ここからアニメーション*/

@keyframes sizeScale {
  from {
    transform: scale(1,1);
  }
  to {
    transform: scale(1.3,1.3);
  }
}

/*ここまでアニメーション*/

●js●

$(function(){
  
  $('#res-menu-icon').click(function(){
    var $list='#res-menu-list';
    if($list.hasClass('open')){
      $list.removeClass('open');
      $list.slideUp();
    } else {
      $list.addClass('open');
      $list.slideDown();
    } 
  });
});

行動規範の内容に同意します

回答2件

全部のコードを貼られても。。
こう言う時は、何が原因で起こってるのか分からないので原因部分以外を削除してメニューだけにスコープしてデバッグすることをお勧めします！

投稿2018/02/16 18:59

退会済みユーザー

総合スコア0

ベストアンサー

ほとんどコードを読んでいませんが、下記部分は書き方が間違っています。

js
1// var $list='#res-menu-list';
2//            ↓                ↓
3   var $list=$('#res-menu-list');

投稿2018/02/16 12:26

kei344

総合スコア69407

aazzkk

2018/02/17 09:19

無事表示されました。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

メニューアイコンをクリックしたら下にメニューをスライドで表示させたい。

関連した質問