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

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

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

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

Q&A

解決済

1回答

1185閲覧

ハンバーガーメニューの中にモーダルを作成したが、モーダルを閉じるとハンバーガーメニューまで閉じてしまう。

ryochi

総合スコア5

JavaScript

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

0グッド

0クリップ

投稿2021/12/23 04:25

前提・実現したいこと

スマホのハンバーガーメニュの中の項目を押すと、モーダルが開くようにしたのですが、モーダルのcloseボタンをクリックするとハンバーガーメニューまで消えてしまいます。
モーダルのcloseを押すとひとつ前のハンバーガーのメニューが開いている状態に戻るようにしたいです。
解決策わかる方いらっしゃったら、どうぞよろしくお願いいたします。

該当のソースコード

html

1<body> 2 3 <header class="l-header is-fix nomove"> 4 <div class="l-header-inner"> 5 <h1 class="l-logo">LOGO</h1> 6 </div> 7 <div id="navArea"> 8 <nav class="humbergar"> 9 <div class="inner"> 10 <ul> 11 <li class="sp-logo"><a href="">LOGO</li> 12 <li><a href="#Sp-l-gnav-sub-link_LINEUP" class="Sp-modalOpen is-imghover">モーダルオープン</a></li> 13 <li>リスト</li> 14 <li>リスト</li> 15 </ul> 16 </div> 17 </nav> 18 <div class="toggle_btn"> 19 <span></span> 20 <span></span> 21 <span></span> 22 </div> 23 <div id="mask"></div> 24 </div> 25 </header> 26 <!-- SPモーダル --> 27 <div class="Sp-m-modal" id="Sp-l-gnav-sub-link_LINEUP"> 28 <div class="Sp-m-modal-overLay"></div> 29 <div class="m-modal-inner"> 30 31 <p class="m-modal-close-btn mgb25"><a href="" 32 class="Sp-modalClose"><span>CLOSE</span></a></p> 33 <!-- </div> --> 34 </div> 35 </div> 36</body>

css

1 2.humbergar { 3 font-family: Meiryo, sans-serif; 4 display: block; 5 position: fixed; 6 top: 0; 7 left: -300px; 8 bottom: 0; 9 width: 300px; 10 background: #ffffff; 11 overflow-x: hidden; 12 overflow-y: auto; 13 -webkit-overflow-scrolling: touch; 14 -webkit-transition: all .5s; 15 transition: all .5s; 16 z-index: 3; 17 opacity: 0; 18} 19 20.open .humbergar { 21 left: 0; 22 opacity: 1; 23} 24 25.humbergar .inner { 26 padding: 25px; 27} 28 29.humbergar .inner ul { 30 list-style: none; 31 margin: 0; 32 padding: 0; 33} 34 35.humbergar .inner ul li { 36 position: relative; 37 margin: 0; 38 border-bottom: 1px solid #333; 39} 40 41.humbergar .inner ul li a { 42 display: block; 43 color: #333; 44 font-size: 14px; 45 padding: 1em; 46 text-decoration: none; 47 -webkit-transition-duration: 0.2s; 48 transition-duration: 0.2s; 49} 50 51.humbergar .inner ul li a:hover { 52 background: #e4e4e4; 53} 54 55@media screen and (max-width: 900px) { 56 .humbergar { 57 left: -220px; 58 width: 220px; 59 } 60} 61 62/*============ 63 .toggle_btn 64 =============*/ 65.toggle_btn { 66 display: block; 67 position: fixed; 68 top: 39px; 69 right: 30px; 70 width: 30px; 71 height: 30px; 72 -webkit-transition: all .5s; 73 transition: all .5s; 74 cursor: pointer; 75 z-index: 3; 76} 77 78.toggle_btn span { 79 display: block; 80 position: absolute; 81 left: 0; 82 width: 30px; 83 height: 2px; 84 background-color: #323232; 85 border-radius: 4px; 86 -webkit-transition: all .5s; 87 transition: all .5s; 88} 89 90.toggle_btn span:nth-child(1) { 91 top: 4px; 92} 93 94.toggle_btn span:nth-child(2) { 95 top: 14px; 96} 97 98.toggle_btn span:nth-child(3) { 99 bottom: 4px; 100} 101 102.open .toggle_btn span { 103 background-color: #fff; 104} 105 106.open .toggle_btn span:nth-child(1) { 107 -webkit-transform: translateY(10px) rotate(-315deg); 108 transform: translateY(10px) rotate(-315deg); 109} 110 111.open .toggle_btn span:nth-child(2) { 112 opacity: 0; 113} 114 115.open .toggle_btn span:nth-child(3) { 116 -webkit-transform: translateY(-10px) rotate(315deg); 117 transform: translateY(-10px) rotate(315deg); 118} 119 120/*============ 121#mask 122=============*/ 123#mask { 124 display: none; 125 -webkit-transition: all .5s; 126 transition: all .5s; 127} 128 129.open #mask { 130 display: block; 131 position: fixed; 132 top: 0; 133 left: 0; 134 width: 100%; 135 height: 100%; 136 background: #000; 137 opacity: .8; 138 z-index: 2; 139 cursor: pointer; 140} 141 142/* SPモーダル */ 143.Sp-m-modal { 144 font-family: Meiryo, sans-serif; 145 position: absolute; 146 width: 100%; 147 /* height: 100vh; */ 148 visibility: hidden; 149 opacity: 0; 150 width: 100%; 151 /* height: 100%; */ 152 transition: .5s; 153} 154 155.Sp-m-modal-overLay { 156 position: fixed; 157 top: 0; 158 left: 0; 159 background: rgba(0, 0, 0, 0.5); 160 width: 100%; 161 height: 100vh; 162 z-index: 9000; 163} 164 165.Sp-m-modal .m-modal-inner { 166 position: fixed; 167 top: 5px; 168 background: #f0f0f0; 169 width: 80%; 170 height: 95vh; 171 left: 0; 172 right: 0; 173 max-width: 350px; 174 margin: 0 auto; 175 padding-bottom: 5px; 176 z-index: 9001; 177} 178.Sp-m-modal .m-modal-inner .m-modal-mh { 179 /* display: inline-block; */ 180 font-size: 14px; 181 text-align: center; 182 background-color: #fff; 183 padding: 10px 0 184} 185.Sp-m-modal .m-modal-inner .m-modal-mh span { 186 display: block; 187 font-family: 'Montserrat', sans-serif; 188 font-weight: 700; 189 font-size: 25px; 190 letter-spacing: 2px; 191 margin-bottom: 5px 192} 193.Sp-m-modal .m-modal-inner .m-modal-link { 194 padding: 17px 0 0 27px 195} 196.Sp-m-modal .m-modal-inner ul li { 197 margin-left: 10px; 198 line-height: 1.2; 199 font-size: 14px; 200} 201.Sp-m-modal .m-modal-inner .m-modal-link-mh { 202 font-size: 16px; 203 font-weight: 700; 204 margin-left: 0; 205 line-height: 1 206} 207 208.Sp-m-modal .m-modal-inner .m-modal-link-sh { 209 margin: 10px 0 10px; 210 line-height: 1 211} 212 213.Sp-m-modal .m-modal-inner .m-modal-close-btn { 214 width: 240px; 215 margin: 10px auto; 216 height: 50px; 217 background: #484848; 218 219} 220 221.Sp-m-modal .m-modal-inner .m-modal-close-btn a { 222 display: block; 223 width: 100%; 224 height: 100%; 225 padding-top: 17px; 226 letter-spacing: 4px; 227 text-align: center; 228 color: #fff; 229} 230 231.Sp-m-modal .m-modal-inner .m-modal-close-btn a span { 232 position: relative; 233 padding-left: 20px 234} 235 236.Sp-m-modal .m-modal-inner .m-modal-close-btn a span::before { 237 position: absolute; 238 content: ''; 239 width: 16px; 240 height: 1px; 241 background: #fff; 242 top: 50%; 243 left: 0; 244 transform: rotate(45deg) 245} 246 247.Sp-m-modal .m-modal-inner .m-modal-close-btn a span::after { 248 position: absolute; 249 content: ''; 250 width: 16px; 251 height: 1px; 252 background: #fff; 253 top: 50%; 254 left: 0; 255 transform: rotate(-45deg) 256} 257/* モーダル表示用クラス */ 258.is-show { 259 visibility: visible; 260 opacity: 1; 261} 262 263.open-modal { 264 265 visibility: visible; 266 opacity: 1; 267}

javascript

1 <!-- ハンバーガーメニュー --> 2 <script src="https://code.jquery.com/jquery-3.6.0.min.js" 3 integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 4 <script> 5 (function ($) { 6 var $nav = $('#navArea'); 7 var $btn = $('.toggle_btn'); 8 var $mask = $('#mask'); 9 var open = 'open'; // class 10 // menu open close 11 $btn.on('click', function () { 12 if (!$nav.hasClass(open)) { 13 $nav.addClass(open); 14 } else { 15 $nav.removeClass(open); 16 } 17 }); 18 // mask close 19 $mask.on('click', function () { 20 $nav.removeClass(open); 21 }); 22 })(jQuery); 23 24 // モーダル 25 $(function () { 26 $('.modalOpen').on('click', function () { 27 $('.m-modal').toggleClass('is-show'); 28 }); 29 $('.modalClose').on('click', function () { 30 $('.m-modal').toggleClass('is-show'); 31 }); 32 $('').on('click', function () { 33 $('.m-modal-overlay').toggleClass('is-show'); 34 }); 35 }); 36 // スマホ 37 38 39 $(function () { 40 $('.Sp-modalOpen').on('click', function () { 41 $('.Sp-m-modal').toggleClass('open-modal'); 42 }); 43 $('.Sp-modalClose').on('click', function () { 44 $('.Sp-m-modal').toggleClass('open-modal'); 45 46 }); 47 $('').on('click', function () { 48 $('.Sp-m-modal-overlay').toggleClass('open-modal'); 49 }); 50 }); 51 </script>

試したこと

モーダルのcloseボタンをクリックした際に、ハンバーガーメニュー

$('.Sp-modalClose').on('click', function () { $('.Sp-m-modal').toggleClass('open-modal');    ここを追記してみた↓//   $('#navArea').addClass('open'); });

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

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

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

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

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

guest

回答1

0

ベストアンサー

html

1 <p class="m-modal-close-btn mgb25"><a href="" 2 class="Sp-modalClose"><span>CLOSE</span></a></p> 3 <!-- </div> -->

上記の部分でa要素のhrefの設定が不正なのが原因だと思われます。

html

1 <p class="m-modal-close-btn mgb25"><a href="#" 2 class="Sp-modalClose"><span>CLOSE</span></a></p> 3 <!-- </div> -->

と修正してはどうでしょう。こちらのサンプルでは正しく動作しました。

投稿2021/12/23 05:48

hatena19

総合スコア33620

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

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

ryochi

2021/12/23 06:41

ありがとうございます! 上記の通りaタグのhrefを修正したらうまく動きました!
ryochi

2021/12/23 07:45

すみません、追加で分かれば教えていただきたいのですが、 モーダルを開くときに少し引っかかりが出るのですが、これは解消できるのでしょうか? よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問