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', 'MS ゴシック', 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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。