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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

842閲覧

ドロワーメニュー ページ内リンクをクリックで閉じたい

asdfdsa

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/06/13 10:50

前提・実現したいこと

ドロワーメニューのページ内リンクをクリックした時にメニューを閉じるようにしたいです。

ドロワーメニュー内のリンクをクリックすると該当箇所まで移動はしますが、メニューが閉じずに開いたままになってしまいます。

該当のソースコード

html

1<div class="drawer_menu"> 2<div class="menu-trigger"> 3<span></span> 4<span></span> 5<span></span> 6</div> 7<nav> 8<ul> 9<li><a href="#○">○○○○</a></li> 10<li><a href="#○">○○○○</a></li> 11<li><a href="#○">○○○○</a></li> 12<li><a href="#○">○○○○</a></li> 13<li><a href="#○">○○○○</a></li> 14<li><a href="#○">○○○○</a></li> 15<li><a href="#○">○○○○</a></li> 16</ul> 17</nav> 18<div class="overlay"></div> 19</div> 20 21

css

1.overlay { 2 content: ""; 3 display: block; 4 width: 0; 5 height: 0; 6 position: absolute; 7 top: 0; 8 left: 0; 9 z-index: 2; 10 opacity: 0; 11 transition: opacity .5s; 12} 13 14.overlay.open { 15 width: 100%; 16 height: 100%; 17 opacity: 1; 18} 19 20main { 21 height: 100%; 22 min-height: 100vh; 23 background-color: #eee; 24 transition: all .5s; 25} 26 27main.open { 28 transform: translateX(-250px); 29} 30 31.menu-trigger { 32 display: inline-block; 33 width: 36px; 34 height: 28px; 35 vertical-align: middle; 36 cursor: pointer; 37 position: absolute; 38 top: 10px; 39 right: 0; 40 z-index: 999; 41} 42.menu-trigger span { 43 display: inline-block; 44 box-sizing: border-box; 45 position: absolute; 46 left: 0; 47 width: 100%; 48 height: 4px; 49 background-color: rgb(16, 69, 153, 1); 50 transition: all .5s; 51} 52.menu-trigger.active span { 53 background-color: #fff; 54} 55.menu-trigger span:nth-of-type(1) { 56 top: 0; 57} 58.menu-trigger.active span:nth-of-type(1) { 59 transform: translateY(12px) rotate(-45deg); 60} 61.menu-trigger span:nth-of-type(2) { 62 top: 12px; 63} 64.menu-trigger.active span:nth-of-type(2) { 65 opacity: 0; 66} 67.menu-trigger span:nth-of-type(3) { 68 bottom: 0; 69} 70.menu-trigger.active span:nth-of-type(3) { 71 transform: translateY(-12px) rotate(45deg); 72} 73.drawer_menu nav { 74 width: 350px; 75 height: 100%; 76 padding-top: 100px; 77 background-color: rgb(68, 85, 142, 0.95); 78 position: fixed; 79 top: 0; 80 right: 0; 81 z-index: 10; 82 transform: translate(350px); 83 transition: all .5s; 84} 85.drawer_menu nav.open { 86 transform: translateZ(0); 87} 88.drawer_menu nav ul { 89 padding: 30px; 90} 91.drawer_menu nav li { 92 text-align: left; 93 font-size: 1.8rem; 94} 95.drawer_menu nav li a { 96 color: #fff; 97 display: block; 98 padding: 3% 0; 99}

JavaScript

1$(function() { 2 $('.menu-trigger').on('click', function() { 3 if ($(this).hasClass('active')) { 4 $(this).removeClass('active'); 5 $('main').removeClass('open'); 6 $('nav').removeClass('open'); 7 $('.overlay').removeClass('open'); 8 } else { 9 $(this).addClass('active'); 10 $('main').addClass('open'); 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 $('main').removeClass('open'); 20 $('nav').removeClass('open'); 21 } 22 }); 23});

試したこと

同じような質問を閲覧したり、調べたりして試してみたのですがなかなかうまくいきませんでした。
JavaScript初心者のためご教示いただけましたら幸いです。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

jQuery

1 $('nav').on('click', 'a[href^="#"]', function(event) { 2 $('.overlay').trigger('click'); 3 });

投稿2019/06/14 02:55

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asdfdsa

2019/06/14 04:34

x_x 様 ご教示頂きありがとうございます。 すみません、どこの部分に該当コードを追加すれば良いかご教示いただけないでしょうか。 コードをしっかりと理解せず使用していて、記述箇所が分かりませんでした。 お手数をおかけしてしまい申し訳ございません。 よろしくお願いいたします。
x_x

2019/06/14 04:49

どこでも動きそうな気がしますが、おすすめは最後の }); の直前ですかね
asdfdsa

2019/06/14 05:20

早速のご返信ありがとうございます。 ご教示頂いた内容で追加したところ、希望通りの動きになりました。 ありがとうございます。 度々すみません、1点お聞きしたいのですが 現在提示したコードと同じJSファイルでページ内リンクの記述を新たに追加したところ教示いただいたコードが反映されなくなってしまいました。 ページ内リンクの記述のどの部分を修正したら問題なく動かす事が出来ますでしょうか。 重ね重ねお手数をおかけいたしますがご教示頂けますと幸いです。 ページ内リンクの記述 ----------------------------------------------------------- $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var headerHeight = 99; //固定ヘッダーの高さ var position = target.offset().top - headerHeight; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); -----------------------------------------------------------
x_x

2019/06/14 05:31

return false;となっているためですが、すでにあるのであれば改めてイベントリスナーは追加せず、その中で書いたほうがいいかと思います。 $('.overlay').trigger('click');
asdfdsa

2019/06/14 05:47

ご教示いただいた内容で問題なく動かすことができました。 この度はご多忙の折にもかかわらずご丁寧に教示いただき、ありがとうございます。 なんとお礼を申し上げてよいのか感謝してもしきれません。 またご相談させて頂くこともあるかと存じますが、その際には何卒よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問