Q&A
タグ「jQuery」のわりに、jQueryのコードや言及もありません。
HTML,CSSだけで再現できるのでしょうか？
前提・実現したいこと
ハンバーガーメニュー内のリンクをクリックすると該当箇所(リンク先は同じページ)まで移動し、
且つクリックした後はハンバーガーメニューが自動的に閉じるようなjqueryの記述はどうすればよいでしょうか？
発生している問題・エラーメッセージ
ハンバーガーメニュー内のリンクを押すとその該当箇所にまでは移動するのですが、
ハンバーガーメニューが閉じない状態となっております。
該当のソースコード
html
<body> <header class="header"> <div class="pc-head"> <nav> <ul class="menu> <li class="global-nav-item"><a href="#top">T O P</a></li> <li class="global-nav-item"><a href="#menu">メニュー</a></li> <li class="global-nav-item"><a href="#information">店舗情報</a></li> <li class="global-nav-item"><a href="contact.html">ご予約</a></li> </ul> </nav> </div> <div class="sp-head"> <div class="mobile-logo"><a href="#top"><img src="images/test1.png"></a></div> <div class="global-reserve"> <a class="link" href="contact.html">ご予約</a> </div> <nav class="nav"> <ul id="list"> <li class="global-nav-item"><a href="#top">T O P</a></li> <li class="global-nav-item"><a href="#menu">メニュー</a></li> <li class="global-nav-item"><a href="#information">店舗情報</a></li> <li class="global-nav-item"><a href="contact.html">ご予約</a></li> </ul> </nav> <button type="button" id="nav-button"></button> </div> </header> <div class="wrap"> <div class="top-area" id="top"></div> <div class="main-area" id="menu"></div> <div> <h2 class="info" id="information">information</h2> <div id="map"></div> </div> </div> </body>
css
/* ハンバーガーメニュー */ .nav{ position: absolute; width: 100%; height: 100vh; background: rgba(0,0,0,0.9); color: #ffffff; display: flex; justify-content: center; align-items: center; /* 初期：非表示 */ visibility: hidden; opacity: 0; transition: 0.5s ease-in-out; } .nav ul{ list-style:none; } .nav li:not(:last-child){ margin-bottom: 30px; } .nav a{ color: #ffffff; } /* ナビゲーションボタン（開く） */ #nav-button{ position: relative; top:30px; outline: none; border: none; background: none; width: 50px; height: 20px; cursor: pointer; } #nav-button::before, #nav-button::after{ content : ''; display: block; height: 1px; background-color: white; transform: translateY(10px); transition: 0.3s ease-in-out; } #nav-button::before{ transform: translateY(-10px); box-shadow: 0 10px white; } /* ナビゲーションボタン（閉じる） */ .open #nav-button{ z-index: 100; } .open #nav-button::before{ transform: rotate(-45deg); box-shadow: none; } .open #nav-button::after{ transform: rotate(45deg); box-shadow: none; } /* ナビゲーションメニュー 開いた時*/ .open .nav{ visibility: visible; opacity: 1; }
jQuery
$(function () { $('#nav-button').on('click', function () { $(this).toggleClass('active'); $(".nav").toggleClass('active'); }) }) $(function () { $('.nav a').on('click', function () { $('.nav').toggleClass('active'); $("#nav-button").toggleClass('active'); }) });
試したこと
似たような質問をされてる方の回答者様の記述を真似たりしてみたのですが上手く実装できませんでした。
ご教示願えますでしょうか。
補足情報（FW/ツールのバージョンなど）
参考サイト
https://cocotsubu.com/2018/09/04/post-1341/
jQueryだけ参考にしました。
jQueryのコードはハンバーガーメニューを開閉する記述しかしていないので省略しました。
似た質問をされてる記事の回答者様の回答をこのように参考にしましたが実装できませんでした。
$('#list a[href^="#"]').on('click', function() {
$('.menu').click();
});
あなたの回答
tips
プレビュー
