Q&A
CSSをご提示ください。
メニューボタンをクリックしたらhamburgerクラスが開いてその時はスクロール固定にしたいです。
hamburgerクラスが閉じたらスクロール可能にしたいです。
クリックしたらbody固定できるのですが、hamburgerを閉じても固定になっています
php
1---index.php--- 2<div class="hamburger"> 3 <div class="hamburger-inner"> 4 <div class="ham-company"> 5 <h3>会社情報</h3> 6 <p>company</p> 7 </div> 8 <div class="ham-company"> 9 <h3>事業内容</h3> 10 <p>service</p> 11 </div> 12 <div class="ham-company"> 13 <h3>制作事例</h3> 14 <p>works</p> 15 </div> 16 <div class="ham-company"> 17 <h3>採用情報</h3> 18 <p>recruit</p> 19 </div> 20 <div class="ham-company"> 21 <h3>お知らせ</h3> 22 <p>news</p> 23 </div> 24 </div> 25 26 <div class="hamburger-button"> 27 <a href="">NEVY’sコラム</a> 28 <a class="hum-button-inner" href=""> 29 <i class="far fa-envelope"></i> 30 <p>お問い合わせ</p> 31 </a> 32 </div> 33</div> 34--- 35---header.php---- 36<div class="header-right"> 37 38 <div class="header-right-inner"> 39 <i class="fas fa-search"></i> 40 41 <a href=""><i class="far fa-envelope"></i></a> 42 </div> 43 <input type="checkbox" id="menu-btn-check"> 44 <label for="menu-btn-check" class="menu-btn"><span></span></label> 45 46 47 48 49 50 </div>
jquery
1jQuery(function () { 2 $('.menu-btn').click(function () { 3 $('.hamburger').toggle(); 4 $('.header-right-inner').toggle(); 5 $('body').addClass('fixed'); 6 }); 7 8https://dezanari.com/jquery-modal/の記事を参考に以下のコードに書き換えてみましたが、hamburgerを閉じても 9bodyが固定のままです 10jQuery(function () { 11 $('.menu-btn').click(function () { 12 $('.hamburger').toggle(); 13 $('.header-right-inner').toggle(); 14 $('body').addClass('fixed'); 15 }); 16 $('menu-btn').click(function() { 17 18 $('body').removeClass('fixed');//背景固定を解除 19 20 return false;//<a>を無効化 21 }); 22}); 23});
回答1件
0
下記でどうでしょう。
js
1jQuery(function () { 2 $('.menu-btn').click(function () { 3 $('.hamburger').toggle(); 4 $('.header-right-inner').toggle(); 5 $('body').toggleClass('fixed'); 6 });
投稿2021/01/12 01:55
総合スコア33790
あなたの回答
tips
プレビュー
