前提・実現したいこと
JQuery 3x系でハンバーガーメニューとスムーススクロールを作成していますが、リンククリック後にメニューが閉じるようにしたいのです。ご教授お願い致します。
発生している問題・エラーメッセージ
メニューが展開はされるが閉じない。> 引用テキスト
該当のソースコード
html
1<header> 2 <h1><a href="index.html">サイトタイトル</a></h1> 3 <div class="menu-trigger" href=""> <span></span><span></span><span></span></div> 4 <nav class="gnav"> 5 <ul> 6 <li><a href="#info">INFOMATION</a></li> 7 <li><a href="#main">MAIN</a></li> 8 <li><a href="#link">BOOKMARK</a></li> 9 <li><a href="#contact">MAIL</a></li> 10 <li><a href="#aboutlink">ABOUTLINK</a></li> 11 </ul> 12 </nav> 13 <div class="overlay"></div> 14</header>
javascript
1///script/// 2 3$(function () { 4 $('.menu-trigger').on('click', function () { 5 if ($(this).hasClass('active')) { 6 $(this).removeClass('active'); 7 $('nav').removeClass('open'); 8 $('.overlay').removeClass('open'); 9 } else { 10 $(this).addClass('active'); 11 $('nav').addClass('open'); 12 $('.overlay').addClass('open'); 13 } 14 }); 15 $('.overlay').on('click', function () { 16 if ($(this).hasClass('open')) { 17 $(this).removeClass('open'); 18 $('.menu-trigger').removeClass('active'); 19 $('nav').removeClass('open'); 20 } 21 }); 22}); 23$(function () { 24 var showFlag = false; 25 var topBtn = $('#page-top'); 26 topBtn.css('bottom', '-100px'); 27 var showFlag = false; 28 $(window).scroll(function () { 29 if ($(this).scrollTop() > 100) { 30 if (showFlag == false) { 31 showFlag = true; 32 topBtn.stop().animate({ 33 'bottom': '20px' 34 }, 200); 35 } 36 } else { 37 if (showFlag) { 38 showFlag = false; 39 topBtn.stop().animate({ 40 'bottom': '-100px' 41 }, 200); 42 } 43 } 44 }); 45 topBtn.click(function () { 46 $('body,html').animate({ 47 scrollTop: 0 48 }, 500); 49 return false; 50 }); 51}); 52 53$(function () { 54 $('a[href^="#"]').click(function () { 55 var speed = 500; 56 var href = $(this).attr("href"); 57 var target = $(href == "#" || href == "" ? 'html' : href); 58 var position = target.offset().top; 59 $("html, body").animate({ 60 scrollTop: position 61 }, speed, "swing"); 62 return false; 63 }); 64}); 65///ここまで///
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/03 09:51