ハンバーガーメニューのリンク部分をクリックしたらメニューが閉じるようにしたく思います。 こちら他サイトで紹介されているJSの記載方法で作業してみたのですが、
ハンバーガーメニューのリンク部分をクリックしたらメニューが閉じるようにしたく思います。 こちら他サイトで紹介されているJSの記載方法で作業してみたのですが、 リンクをクリックしても閉じません。。 当方の方でも引き続き作業していますがどうしても直らずで、こちらに相談させてもらいました。 おそらくJSの書き方の問題かと思うのですが どのような書き方に変えればいいでしょうか？ 文字オーバーだったので 参考CSS（長くいのと見えにくくすみません）は画像で載せています。 html ：：：：：：：：：：：：：：：：：：：：：：：：：： <header class="header"> <div id="logo"><a href="#"><img src="img/logo.png"></a></div> <nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__item"><a href="#about">ABOUT</a></li> <li class="global-nav__item"><a href="#movies">MOVIES</a></li> <li class="global-nav__item"><a href="#commercials">COMMERCIALS</a></li> <li class="global-nav__item"><a href="#livebroadcast">LIVE BROADCAST</a></li> <li class="global-nav__item"><a href="#cameratruck">CAMERA TRUCK</a></li> <li class="global-nav__item"><a href="#contact">CONTACT</a></li> </ul> </nav> <div class="hamburger" id="js-hamburger"> <span class="hamburger__line hamburger__line--1"></span> <span class="hamburger__line hamburger__line--2"></span> <span class="hamburger__line hamburger__line--3"></span> </div> <div class="black-bg" id="js-black-bg"></div> </header> ：：：：：：：：：：：：：：：：：：：：：：：：：： JS：：：：：：：：：：：：：：：：：：：：：：：：：： <script> function toggleNav() { var body = document.body; var hamburger = document.getElementById('js-hamburger'); var blackBg = document.getElementById('js-black-bg'); hamburger.addEventListener('click', function() { body.classList.toggle('nav-open'); }); blackBg.addEventListener('click', function() { body.classList.remove('nav-open'); }); $('.global-nav a[href]').on('click',function() { $('.hamburger').removeClass('.nav-open'); } ); } toggleNav(); </script>
JavaScript | HTML、CSS・118閲覧
ベストアンサー
fi_08さん >････他サイトで紹介されているJSの記載････････ こちら↓から拾ってきたなら、一部を下記のように直します。 https://tech-dig.jp/hamburger-global-nav/ ご参考に↓ ･･･ header部 ･････ <nav class="global-nav"> <ul class="global-nav__list" id="global-nav__list"><!-- 修正 --> <li class="global-nav__item"><a href="#about">ABOUT</a></li> <li class="global-nav__item"><a href="#movies">MOVIES</a></li> ････････ ････ script部 ････ blackBg.addEventListener('click', function() { body.classList.remove('nav-open'); }); document.getElementById('global-nav__list').addEventListener('click', function() { body.classList.remove('nav-open'); }); // 追加 /* ここから削除 $('.global-nav a[href]').on('click',function() { $('.hamburger').removeClass('.nav-open'); } ); ここまで削除 */ } toggleNav(); </script> ････････
1人がナイス！しています
質問者からのお礼コメント
ありがとうございます！！ 解決できました！ こちらで解決できましたのでベストアンサーに選ばせてもらいました。 皆様たくさんのご指摘、参考内容を投稿いただきありがとうございます。
お礼日時：1/26 16:04
