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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

735閲覧

scriptで追加したクラスをもう一度クリックした時に削除したいです。

sasaki_0000

総合スコア7

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2020/07/09 09:27

編集2020/07/09 12:46

前提・実現したいこと

ハンバーガーメニューを作成しており、
メニューを開いている間はスクロールをさせないために、htmlタグにoverflow: hidden;を指定したクラスを追加するように指定したのですが、
メニューを閉じた時に消すという指定が初心者で分からず大変困っています。
大変お手数おかけしますが教えていただけますと幸いです。

該当のソースコード

script

1$(function() { 2 $('.navbar_toggle').on('click', function () { 3 $(this).toggleClass('open'); 4 $('.menu-sp').toggleClass('open'); 5 $('html').addClass('scroll-prevent'); 6 }); 7 });

html

1<header class="d-block d-lg-none l-header menu-bg"> 2 <nav> 3 <div class="drawer"> 4 <a class="navbar_brand" href="<?php echo esc_url( home_url('') ); ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/common/images/common/logo.svg" alt=""></a> 5 <div class="navbar_toggle"> 6 <span class="navbar_toggle_icon"></span> 7 <span class="navbar_toggle_icon"></span> 8 <span class="navbar_toggle_icon"></span> 9 </div> 10 </div> 11 <div class="menu-sp"> 12 <ul> 13 <li><a href="#"><strong>SAMPLE</strong></a></li> 14 <li><a href="#"><strong>SAMPLE</strong></a></li> 15 <li><a href="#"><strong>SAMPLE</strong></a></li> 16 <li> 17 <a href="#"><strong>SAMPLE</strong></a> 18 <ul class="child-menu"> 19 <li><a href="#">SAMPLE</a></li> 20 </ul> 21 </li> 22 <li> 23 <a href="#"><strong>SAMPLE</strong></a> 24 <ul class="child-menu"> 25 <li><a href="#">SAMPLE</a></li> 26 </ul> 27 </li> 28 <li> 29 <a href="#"><strong>SAMPLE</strong></a> 30 <ul class="child-menu"> 31 <li><a href="#">SAMPLE</a></li> 32 <li><a href="#">SAMPLE</a></li> 33 </ul> 34 </li> 35 <li> 36 <a href="#"><strong>SAMPLE</strong></a> 37 <ul class="child-menu"> 38 <li><a href="#">SAMPLE</a></li> 39 </ul> 40 </li> 41 </ul> 42 <div> 43 <ul class="btn-li-sp"> 44 <li> 45 <a href="#" class="button-sp mr-3"><i class="far fa-envelope fa-lg fa-fw"></i> Request document</a> 46 </li> 47 </ul> 48 </div> 49 <div class="tel-menu-sp"> 50 <img src="<?php bloginfo('template_directory'); ?>/assets/common/images/common/tel-en.svg" class="w100"> 51 </div> 52 </div> 53 </div> 54 </nav> 55 <?php wp_head(); ?> 56</header>

scss

1nav { 2 width: 100%; 3 height: 15vh; 4 position: relative; 5 background: #ffffff; 6 z-index: 9999; 7} 8 9.drawer { 10 display: flex; 11 flex-direction: row; 12 align-items: center; 13 justify-content: space-between; 14 position: relative; 15 height: 15vh; 16 padding: 0 2em; 17} 18 19.navbar_brand { 20 text-align: center; 21 width: 100%; 22 23 img{ 24 width: 30vw; 25 margin: 0 0 0 5.5em; 26 } 27} 28 29.navbar_toggle { 30 z-index: 100; 31 padding: 2em; 32} 33 34.navbar_toggle_icon { 35 position: relative; 36 display: block; 37 height: 2px; 38 width: 40px; 39 padding: 0 1.2em; 40 background: #000000; 41 -webkit-transition: ease .5s; 42 transition: ease .5s; 43 44 &:nth-child(1) { 45 top: 0; 46 } 47 48 &:nth-child(2) { 49 margin: 8px 0; 50 } 51 52 &:nth-child(3) { 53 top: 0; 54 } 55} 56 57/*OPEN時の動き*/ 58 59.navbar_toggle.open .navbar_toggle_icon { 60 &:nth-child(1) { 61 top: 10px; 62 -webkit-transform: rotate(45deg); 63 transform: rotate(45deg); 64 } 65 66 &:nth-child(2) { 67 -webkit-transform: translateY(-50%); 68 transform: translateY(-50%); 69 opacity: 0; 70 } 71 72 &:nth-child(3) { 73 top: -10px; 74 -webkit-transform: rotate(-45deg); 75 transform: rotate(-45deg); 76 } 77} 78 79.menu-sp { 80 -webkit-transform: translateX(-100%); 81 transform: translateX(-100%); 82 -webkit-transition: ease .5s; 83 transition: ease .5s; 84 background-color: #ff6347; 85 height: 100vh; 86 87 ul { 88 width: 80%; 89 margin: 0 auto; 90 padding: 3em 0; 91 92 li { 93 padding: 1em 0; 94 width: 100%; 95 96 a { 97 color: white; 98 text-decoration: none; 99 font-size: 1.3em; 100 } 101 102 .child-menu{ 103 padding: 1em 0; 104 margin: 0 0 0 2em; 105 106 li{ 107 padding: 0.5em 0; 108 width: 100%; 109 110 a{ 111 color: white; 112 text-decoration: none; 113 font-size: 1.1em; 114 } 115 } 116 } 117 } 118 } 119 120 &.open { 121 -webkit-transform: translateX(0); 122 transform: translateX(0); 123 overflow-y: auto; 124 -webkit-overflow-scrolling: touch; 125 height: 100vh; 126 } 127} 128 129/*OPEN時の動き*/ 130 131@media screen and (min-width: 992px) { 132 nav { 133 display: flex; 134 flex-direction: row; 135 } 136 137 .navbar_toggle { 138 display: none; 139 } 140 141 .menu-sp { 142 width: 100%; 143 -webkit-transform: translateX(0); 144 transform: translateX(0); 145 146 ul { 147 height: 70px; 148 display: flex; 149 flex-wrap: wrap; 150 justify-content: flex-end; 151 align-items: center; 152 153 li { 154 padding: 0 1em; 155 border-bottom: none; 156 } 157 } 158 } 159} 160 161.tel-menu-sp{ 162 background-color: #ffffff; 163 padding: 2em; 164 width: 80%; 165 margin: 0 auto 3em auto; 166} 167

試したこと

https://qiita.com/Scheme/items/300739f6da6a95e58306
上記のサイトを参考に設定したりしてみたのですがトグルメニューを触っても反応がないなどの状態になりました。

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

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

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

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

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

m.ts10806

2020/07/09 09:49

>sqript 「script」かと思います。
m.ts10806

2020/07/09 09:50

しかし、PHPは関係ないのでは? あと、HTML提示願います。 JavaScriptだけでは動作確認できません。
sasaki_0000

2020/07/09 10:03

ご指摘ありがとうございました。 scriptの表記修正致しました。 phpをタグ追加してしまっていた件、phpでサイトを作成していたのでどこまで関係があるのかわからず追加してしまいました。申し訳ございません。削除致しました。 htmlとcss後ほど追記いたします。
m.ts10806

2020/07/09 20:39

むしろ関係するのはWordPressでしたか。厳密には「PHPで作った」とは言えないと思います。 あと、SCSSをそのまま提示されてもコンパイルしないといけないなど環境が必要なので、HTMLもですが、「ブラウザから利用されるソース」を提示された方がアドバイスは得やすくなるかと思います
guest

回答2

0

自己解決

yambejpさまに「クラスの付け外しはできています」のコメントでヒントをいただき下記のように書き換えたところ無事希望の動作になりました!ありがとうございました…!

script

1$(function() { 2 $('.navbar_toggle').on('click', function () { 3 $(this).toggleClass('open'); 4 $('.menu-sp').toggleClass('open'); 5 $('html').addClass('scroll-prevent'); 6 }); 7 });

投稿2020/07/10 01:30

sasaki_0000

総合スコア7

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

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

0

$('.navbar_toggle')のクリックにより、自身や$('.menu-sp')のopenクラスのつけ外しはできています。
「メニューを閉じた時」とはどのことをいうのでしょうか?

投稿2020/07/10 01:05

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問