Q&A
jsにはclickイベントの付加処理しかないですが、ソースはこれで全てですか？
.humburger クラスがHTMLに無いので、ロード用の処理があるのでは。
前提・実現したいこと
表題の通り、閉じようとすると、nav-openとhumburgerのline(線）がもとに戻らない
発生している問題・エラーメッセージ
humburgerをhumburgerをクリックすると、nav-openにより、drawer-navが開くのですが 再度humburgerをクリックし、閉じようとすると、閉じないです
試したこと
まず、現状の把握してほしい点をお伝えします。
・drawer-nav,lineもは開く、動く状態です
・humburgerクリックする際のみ、上記が閉じないです。
そこで、確認した点は、閉じる際のjs時のdrawer-navやlineのclassの確認です。→classは間違っていませんでした。
■また、overlayクリック時には、drawer-navやlineは閉じる際の動作しています。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <link href="./Top/asset/css/destyle.css" rel="stylesheet"> 6 <link href="./Top/asset/css/style.css" rel="stylesheet"> 7 8</head> 9 10<body> 11 <header class="header"> 12 <div class="header-inner"> 13 <div class="header-left"> 14 <h1 class="logo"><a href="#"><img alt="" class="header-logo" src="./asserts/img/top-header-logo.png"></a></h1> 15 <nav class="nav drawer-nav"> 16 <ul class="header-list"> 17 <li class="header-item"> 18 <a href="./Room/room.html">お部屋</a> 19 </li><!-- /.header-item --> 20 <li class="header-item"> 21 <a href="./Menu/menu.html">お料理</a> 22 </li><!-- /.header-item --> 23 <li class="header-item"> 24 <a href="./Onsen/onsen.html">温泉</a> 25 </li><!-- /.header-item --> 26 </ul><!-- /.header-list --> 27 </nav><!-- /.nav --> 28 </div> 29 <div class="header-right"> 30 <div class="header-link" id="js-modal"> 31 <a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> --> 32 宿泊予約</a> 33 </div><!-- /.header-link --> 34 <button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button> 35 </div><!-- /.header-right --> 36 </div><!-- /.header-inner --> 37 </header><!-- /.header --> 38 <div class="overlay"></div><!-- /.overlay --> 39</body> 40</html>
css
1 2.header-left .nav { 3 display: -webkit-box; 4 display: -webkit-flex; 5 display: -ms-flexbox; 6 display: flex; 7 -webkit-box-pack: justify; 8 -webkit-justify-content: space-between; 9 -ms-flex-pack: justify; 10 justify-content: space-between; 11 -webkit-box-align: center; 12 -webkit-align-items: center; 13 -ms-flex-align: center; 14 align-items: center; 15 margin-left: 120px; 16} 17 18.header-left .nav-open { 19 -webkit-transform: translateZ(0); 20 transform: translateZ(0); 21} 22 23@media screen and (min-width: 600px) and (max-width: 1179px) { 24 .header-left .nav { 25 top: 80px; 26 position: fixed; 27 top: 150px; 28 right: 0; 29 z-index: 10; 30 overflow: hidden; 31 width: 16.25rem; 32 background-color: #000; 33 width: 50%; 34 height: 60vh; 35 -webkit-transform: translate(550px); 36 transform: translate(550px); 37 -webkit-transition: .5s; 38 transition: .5s; 39 } 40 .header-left .nav-open { 41 -webkit-transform: translateZ(0); 42 transform: translateZ(0); 43 } 44} 45 46@media screen and (max-width: 599px) { 47 .header-left .nav { 48 top: 60px; 49 position: fixed; 50 z-index: 2; 51 overflow: hidden; 52 width: 16.25rem; 53 background-color: rgba(0, 0, 0, 0.9); 54 width: 75%; 55 -webkit-transform: translate(550px); 56 transform: translate(550px); 57 -webkit-transition: margin-left .5s; 58 transition: margin-left .5s; 59 } 60 .header-left .nav-open { 61 -webkit-transform: translateZ(0); 62 transform: translateZ(0); 63 } 64} 65 66.header-left .nav .header-list { 67 display: -webkit-box; 68 display: -webkit-flex; 69 display: -ms-flexbox; 70 display: flex; 71 -webkit-box-align: center; 72 -webkit-align-items: center; 73 -ms-flex-align: center; 74 align-items: center; 75 padding-top: 20px; 76 padding-bottom: 20px; 77} 78 79@media screen and (min-width: 600px) and (max-width: 1179px) { 80 .header-left .nav .header-list { 81 display: -webkit-box; 82 display: -webkit-flex; 83 display: -ms-flexbox; 84 display: flex; 85 -webkit-box-orient: vertical; 86 -webkit-box-direction: normal; 87 -webkit-flex-direction: column; 88 -ms-flex-direction: column; 89 flex-direction: column; 90 margin: 100px; 91 text-align: center; 92 padding-left: 40px; 93 } 94} 95 96@media screen and (max-width: 599px) { 97 .header-left .nav .header-list { 98 margin-right: 30px; 99 } 100} 101 102.header-left .nav .header-list .header-item { 103 color: #fff; 104} 105 106@media screen and (min-width: 600px) and (max-width: 1179px) { 107 .header-left .nav .header-list .header-item { 108 padding-left: 20px; 109 } 110} 111 112@media screen and (max-width: 599px) { 113 .header-left .nav .header-list .header-item { 114 padding: 0px; 115 font-size: 2rem; 116 } 117} 118 119.header-left .nav .header-list .header-item + .header-item { 120 padding-left: 30px; 121} 122 123@media screen and (min-width: 600px) and (max-width: 1179px) { 124 .header-left .nav .header-list .header-item + .header-item { 125 padding-left: 0px; 126 } 127} 128 129@media screen and (max-width: 599px) { 130 .header-left .nav .header-list .header-item + .header-item { 131 padding-left: 0px; 132 } 133} 134 135.header-left .nav .header-list .header-item > a { 136 color: #fff; 137 display: inline-block; 138 -webkit-transition: .3s; 139 transition: .3s; 140 /* 0.3秒で拡大までの時間 */ 141} 142 143@media screen and (min-width: 600px) and (max-width: 1179px) { 144 .header-left .nav .header-list .header-item > a { 145 padding-bottom: 65px; 146 font-size: 2.4rem; 147 } 148} 149
CSS
1} 2 3@media screen and (max-width: 1100px) { 4 .humburger { 5 display: block; 6 position: fixed; 7 top: 15px; 8 right: 35px; 9 width: 30px; 10 height: 30px; 11 -webkit-transition: all .5s; 12 transition: all .5s; 13 cursor: pointer; 14 z-index: 99; 15 } 16 .humburger_open { 17 right: 20px; 18 } 19} 20 21@media screen and (max-width: 1100px) and (max-width: 1100px) { 22 .humburger .line { 23 display: block; 24 background-color: #fff; 25 position: absolute; 26 left: 0; 27 width: 30px; 28 height: 2px; 29 background-color: #333; 30 border-radius: 4px; 31 -webkit-transition: all .5s; 32 transition: all .5s; 33 } 34 .humburger .line:first-child { 35 display: block; 36 height: 3px; 37 } 38 .humburger .line:nth-child(2) { 39 /* top: 0; 40 bottom: 0; 41 margin: auto; */ 42 top: 2px; 43 height: 3px; 44 } 45 .humburger .line:last-child { 46 bottom: 0px; 47 height: 3px; 48 } 49 .humburger .line._open:first-child { 50 display: block; 51 -webkit-transform: rotate(45deg); 52 transform: rotate(45deg); 53 top: 0%; 54 -webkit-transform-origin: left; 55 transform-origin: left; 56 color: #000; 57 } 58 .humburger .line._open:nth-child(2)._open { 59 opacity: 0; 60 } 61 .humburger .line._open:last-child { 62 -webkit-transform: rotate(-45deg); 63 transform: rotate(-45deg); 64 top: 75%; 65 -webkit-transform-origin: left; 66 transform-origin: left; 67 color: #000; 68 } 69}
JS
1$(function(){ 2 3$(".humburger").on('click', function(){ 4 5 if($("this").hasClass('_active')){ 6 $(this).removeClass('_active'); 7 $(".line").removeClass('_open'); 8 9 $("nav").removeClass("nav-open"); 10 // $(".drawer-nav").removeClass('_active'); 11 $('.overlay').removeClass('_open'); 12 $('html').removeClass('scroll-prevent') // 追記 13 14} 15else{ 16 $(this).addClass('_active'); 17 $('.line').addClass('_open'); 18 19 $("nav").addClass("nav-open"); 20 21 $('.overlay').addClass('_open'); 22 $('html').toggleClass('scroll-prevent') // 背景を固定 23} 24}); 25 26 $('.overlay').on('click',function(){ 27 28 if($(this).hasClass('_open')){ 29 30 $(this).removeClass('_open'); 31 $('.humburger').removeClass('_active'); 32 $('.line').removeClass('_open'); 33 34 $("nav").removeClass('nav-open'); 35 $('html').removeClass('scroll-prevent') // 追記 36 // $('.drawer-nav').removeClass('_active'); 37 38 } 39 }); 40 $('.humburger_active').on('click',function(){ 41 42 if($(this).hasClass('_active')){ 43 44 $(this).removeClass('_active'); 45 $('.line').removeClass('_open'); 46 47 $("nav").removeClass('nav-open'); 48 $('.overlay').removeClass('_open'); 49 $('html').removeClass('scroll-prevent') // 追記 50 // $('.drawer-nav').removeClass('_active'); 51 52 } 53 }); 54 55 56});
回答1件
0
ベストアンサー
javascript
1$(".humburger").on('click', function(){ 2 3// if($("this").hasClass('_active')){ <-- this がクォーテーションされています。 4 if($(this).hasClass('_active')){ // 取ったら動きました。 5 6 7 $(this).removeClass('_active'); 8 $(".line").removeClass('_open'); 9 10 ...
（追記）こちらで動いたソース一式貼っておきます。(cssは全く触ってません)
html
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 6 <link href="./hoge.css" rel="stylesheet"> 7 <script src="./hoge.js"></script> 8 9</head> 10 11<body> 12 <header class="header"> 13 <div class="header-inner"> 14 <div class="header-left"> 15 <h1>aaa</h1> 16 <!-- <h1 class="logo"><a href="#"><img alt="" class="header-logo" src="./asserts/img/top-header-logo.png"></a></h1> --> 17 <nav class="nav drawer-nav"> 18 <ul class="header-list"> 19 <li class="header-item"> 20 <a href="./Room/room.html">お部屋</a> 21 </li><!-- /.header-item --> 22 <li class="header-item"> 23 <a href="./Menu/menu.html">お料理</a> 24 </li><!-- /.header-item --> 25 <li class="header-item"> 26 <a href="./Onsen/onsen.html">温泉</a> 27 </li><!-- /.header-item --> 28 </ul><!-- /.header-list --> 29 </nav><!-- /.nav --> 30 </div> 31 <div class="header-right"> 32 <div class="header-link" id="js-modal"> 33 <a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> --> 34 宿泊予約</a> 35 </div><!-- /.header-link --> 36 <button aria-controls="js-glabal-menu" aria-expanded="false" class="humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button> 37 </div><!-- /.header-right --> 38 </div><!-- /.header-inner --> 39 </header><!-- /.header --> 40 <div class="overlay"></div><!-- /.overlay --> 41</body> 42</html>
javascript
1$(function(){ 2 3 $(".humburger").on('click', function(){ 4 5 if($(this).hasClass('_active')){ 6 7 $(this).removeClass('_active'); 8 $(".line").removeClass('_open'); 9 $("nav").removeClass("nav-open"); 10 // $(".drawer-nav").removeClass('_active'); 11 $('.overlay').removeClass('_open'); 12 $('html').removeClass('scroll-prevent') // 追記 13 14 } else { 15 $(this).addClass('_active'); 16 17 $('.line').addClass('_open'); 18 $("nav").addClass("nav-open"); 19 20 $('.overlay').addClass('_open'); 21 $('html').toggleClass('scroll-prevent') // 背景を固定 22 } 23 }); 24 25$('.overlay').on('click',function(){ 26 27 if($(this).hasClass('_open')){ 28 29 $(this).removeClass('_open'); 30 $('.humburger').removeClass('_active'); 31 $('.line').removeClass('_open'); 32 33 $("nav").removeClass('nav-open'); 34 $('html').removeClass('scroll-prevent') // 追記 35 // $('.drawer-nav').removeClass('_active'); 36 37 } 38}); 39 40$('.humburger_active').on('click',function(){ 41 42 if($(this).hasClass('_active')){ 43 44 $(this).removeClass('_active'); 45 $('.line').removeClass('_open'); 46 47 $("nav").removeClass('nav-open'); 48 $('.overlay').removeClass('_open'); 49 $('html').removeClass('scroll-prevent') // 追記 50 // $('.drawer-nav').removeClass('_active'); 51} 52}); 53 54 55});
css
1.header-left .nav { 2 display: -webkit-box; 3 display: -webkit-flex; 4 display: -ms-flexbox; 5 display: flex; 6 -webkit-box-pack: justify; 7 -webkit-justify-content: space-between; 8 -ms-flex-pack: justify; 9 justify-content: space-between; 10 -webkit-box-align: center; 11 -webkit-align-items: center; 12 -ms-flex-align: center; 13 align-items: center; 14 margin-left: 120px; 15 } 16 17 .header-left .nav-open { 18 -webkit-transform: translateZ(0); 19 transform: translateZ(0); 20 } 21 22 @media screen and (min-width: 600px) and (max-width: 1179px) { 23 .header-left .nav { 24 top: 80px; 25 position: fixed; 26 top: 150px; 27 right: 0; 28 z-index: 10; 29 overflow: hidden; 30 width: 16.25rem; 31 background-color: #000; 32 width: 50%; 33 height: 60vh; 34 -webkit-transform: translate(550px); 35 transform: translate(550px); 36 -webkit-transition: .5s; 37 transition: .5s; 38 } 39 .header-left .nav-open { 40 -webkit-transform: translateZ(0); 41 transform: translateZ(0); 42 } 43 } 44 45 @media screen and (max-width: 599px) { 46 .header-left .nav { 47 top: 60px; 48 position: fixed; 49 z-index: 2; 50 overflow: hidden; 51 width: 16.25rem; 52 background-color: rgba(0, 0, 0, 0.9); 53 width: 75%; 54 -webkit-transform: translate(550px); 55 transform: translate(550px); 56 -webkit-transition: margin-left .5s; 57 transition: margin-left .5s; 58 } 59 .header-left .nav-open { 60 -webkit-transform: translateZ(0); 61 transform: translateZ(0); 62 } 63 } 64 65 .header-left .nav .header-list { 66 display: -webkit-box; 67 display: -webkit-flex; 68 display: -ms-flexbox; 69 display: flex; 70 -webkit-box-align: center; 71 -webkit-align-items: center; 72 -ms-flex-align: center; 73 align-items: center; 74 padding-top: 20px; 75 padding-bottom: 20px; 76 } 77 78 @media screen and (min-width: 600px) and (max-width: 1179px) { 79 .header-left .nav .header-list { 80 display: -webkit-box; 81 display: -webkit-flex; 82 display: -ms-flexbox; 83 display: flex; 84 -webkit-box-orient: vertical; 85 -webkit-box-direction: normal; 86 -webkit-flex-direction: column; 87 -ms-flex-direction: column; 88 flex-direction: column; 89 margin: 100px; 90 text-align: center; 91 padding-left: 40px; 92 } 93 } 94 95 @media screen and (max-width: 599px) { 96 .header-left .nav .header-list { 97 margin-right: 30px; 98 } 99 } 100 101 .header-left .nav .header-list .header-item { 102 color: #fff; 103 } 104 105 @media screen and (min-width: 600px) and (max-width: 1179px) { 106 .header-left .nav .header-list .header-item { 107 padding-left: 20px; 108 } 109 } 110 111 @media screen and (max-width: 599px) { 112 .header-left .nav .header-list .header-item { 113 padding: 0px; 114 font-size: 2rem; 115 } 116 } 117 118 .header-left .nav .header-list .header-item + .header-item { 119 padding-left: 30px; 120 } 121 122 @media screen and (min-width: 600px) and (max-width: 1179px) { 123 .header-left .nav .header-list .header-item + .header-item { 124 padding-left: 0px; 125 } 126 } 127 128 @media screen and (max-width: 599px) { 129 .header-left .nav .header-list .header-item + .header-item { 130 padding-left: 0px; 131 } 132 } 133 134 .header-left .nav .header-list .header-item > a { 135 color: #fff; 136 display: inline-block; 137 -webkit-transition: .3s; 138 transition: .3s; 139 /* 0.3秒で拡大までの時間 */ 140 } 141 142 @media screen and (min-width: 600px) and (max-width: 1179px) { 143 .header-left .nav .header-list .header-item > a { 144 padding-bottom: 65px; 145 font-size: 2.4rem; 146 } 147 }
投稿2021/12/29 09:47
編集2021/12/29 12:23総合スコア805
ご回答ありがとうございます。
再度行いましたが、動きませんでした。
そちらの状態が分からないので手の出しようがないですが、こちらで動いたソース一式貼ったので確認してみてください。（"this"をthisに変えただけですが、、）
umauさん、すみません。確認しましたが、解決できなかったので、できれば、ご協力ください。<(_ _)>
下記にjsfiddleでコードを貼りました。よろしくお願いします。
https://jsfiddle.net/vuyh35kw/10/
ウィンドウ幅を広げるとこちらでも表示されなくなりました。
これは恐らくCSSにメディアクエリでmax-widthが設定されているので、それ以上になるとレイアウトが崩れるのが原因だと思いますが、そちらでも同じ状況ですか？
jsfiddle貼ってくれてるのに今気づきました、、見てみます。
jsfiddleのソースが動かないのは、jQueryの本体が読み込まれていないからです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
これ貼ると動きます。
ごめんなさい。おっしゃる通りです。ハンバーガーメニューをある一定数のｐｘを超えると非表示になります。
jsfiddleでは動きましたが、それども動かないですね。不思議です。
エラーは出ていないですか？ChromeならF12キー押して開発者ツール出せば、Consoleタブでスクリプトエラー見れますが。
エラーっぽいエラーは出ていませんが、赤いしるしとしては、こちらです。
英字と日本字の両方を貼ります・
英字：「Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.」
日本字「クッキーのSameSite属性が設定されていないか無効であるため、SameSite=Laxがデフォルトとなり、クロスサイトリクエストでクッキーが送信されないようにします。この動作により、ユーザーデータが誤って第三者に流出したり、クロスサイトリクエストフォージェリーが行われたりするのを防ぐことができます。
この問題は、Cookieの属性を更新することで解決します。
クロスサイトリクエストでCookieを送信する場合は、SameSite=NoneとSecureを指定します。これにより、サードパーティによる使用が可能になります。
クッキーがクロスサイトリクエストで送信されるべきではない場合は、SameSite=StrictまたはSameSite=Laxを指定してください。」
こちら調べたのですが、これに相応するページが見つからなかったのと、理解できませんでした
Chromeがクッキーを送信する際の動きをSameSiteっていう属性で制御するようになったってお話で、サーバー側でクッキー書き込む処理してたりするなら、そこにSameSiteって属性をつけてねって事かと。
(一応、参考)
https://qiita.com/ahera/items/0c8276da6b0bed2b580c
ページ内に別のドメインに対するアクセスがあって、自サーバー側で書き込んだクッキーがあるなら警告出るのかもしれません。
詳しくないので何ともですが、ハンバーガーのスクリプトが動く動かないの話とは無関係だと思います。
ご回答、ご丁寧な回答ありがとうございます。
確認し、できました。ふぉるだーがごちゃごちゃだったのが原因でした。
この度はありがとうございました。心より感謝いたします。
あなたの回答
tips
プレビュー
