

html、cssがすこし触れる程度でjavascriptは主にコピペで使用している初心者です。

スマホでハンバーガーメニューを作成した際、  
メニューを全画面で開いた時に隠れているbody全体はスクロールしないようjQueryで設定していましたが、  
メニューの中身がドロップダウンで開くようになるとbodyのスクロールが復活してしまいました。

メニュー内のドロップダウンが開いたときはメニュー内部のみスクロールさせ、  
背景のbodyは依然としてスクロールさせないようにしたいです。

現在以下のようなコードになっています。  
修正点ご指摘いただけますと幸いです。

▼HTML

[code]

    <div class="sp-only">
        <div class="cp_fullscreenmenu">
            <input class="toggle" type="checkbox" />
            <div class="hamburger"><span></span></div>
            <!--ハンバーガーメニューを押したら開くメニューここから-->
            <div class="menu">
                <div>
                <ul class="menu_ul">
                    <li class="drop click_down_1">
                        <a href="#">あいうえお</a><span class="plus"></span>
                        <div class="sub_list_1">
                            <ul class="menu_close">
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="drop click_down_2">
                        <a href="brand/index.html">かきくけこ</a><span class="plus"></span>
                        <div class="sub_list_2">
                            <ul class="menu_close">
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="drop click_down_3">
                        <a href="theme/index.html">さしすせそ</a><span class="plus"></span>
                        <div class="sub_list_3">
                            <ul class="menu_close">
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                                <li><a href="#">テキスト</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="nodrop"><a href="about/index.html">たちつてと</a><span></span></li>
                    <li class="nodrop"><a href="sustainability/index.html">なにぬねの</a><span></span></li>
                    <li class="nodrop"><a href="https://www.rakuten.co.jp/" target="_blank">はひふへほ</a><span></span></li>
                </ul>
            </div>
        </div>
        <!--ハンバーガーメニューを押したら開くメニューここまで-->
        <div class="logo"><a href="index.html"><img src="images/logo.svg" alt="ほげ"></a></div>
        <div class="nav_icon">
            <a href="javascript:void(0)" class="open-btn"><img src="images/search.svg" width="17px" alt="検索"></a>
            <a href=""><img src="images/cart.svg" width="17px" alt="ほげ"></a>
        </div>
    </div>
    </div>
    
[/code]

▼CSS

[code]

    /*menuコンテンツ*/
    .cp_fullscreenmenu .menu {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        visibility: hidden;
        overflow: hidden;
        width: 100%;
        height: 100%;
        pointer-events: none;
        outline: 1px solid transparent;
    
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        align-items: center;
        justify-content: center;
    }
    .cp_fullscreenmenu .menu > div {
        display: flex;
        overflow-y: scroll;
        width: 100%;
        height: 100%;
    
        text-align: left;
        color: #000000;
        background: rgba(245, 240, 233, 1);
    
        flex: none;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        justify-content: center;
        padding-top: 20%;
    }
    .cp_fullscreenmenu .menu > div > ul {
        display: block;
        max-height: 100vh;
        margin: 0;
        padding: 0 1em;
        list-style: none;
        transition: opacity 0.4s ease;
        opacity: 0;
    }
    .cp_fullscreenmenu .menu > div > ul > li {
        font-size: 14px;
        font-family: 'Josefin Sans',"游ゴシック";
        display: block;
        margin: 1em;
        padding: 0;
        border-bottom: 1px solid #E6E1D9;
        padding-bottom: 14px;
        width: 84vw;
    }
    .cp_fullscreenmenu .menu > div > ul > li > a {
        position: relative;
        display: inline;
        cursor: pointer;
        transition: color 0.4s ease;
    
    }
    .cp_fullscreenmenu .menu > div > ul > li > a:hover {
        color: #e5e5e5;
    }
    .cp_fullscreenmenu .menu > div > ul > li > a:hover:after {
        width: 100%;
    }
    
[/code]

▼JS

[code]

      //メニュークリックでサブメニューを開く_あいうえお
      $(function(){
        $('.click_down_1').click(function () {
       $('.sub_list_1').slideToggle(0);
        });
      });
    
      //メニュークリックでサブメニューを開く_かきくけこ
      $(function(){
        $('.click_down_2').click(function () {
       $('.sub_list_2').slideToggle(0);
        });
      });
    
      //メニュークリックでサブメニューを開く_さしすせそ
      $(function(){
        $('.click_down_3').click(function () {
       $('.sub_list_3').slideToggle(0);
        });
      });
      
    
      //メニュークリックで＋をーにする
    $(function(){
      $(function(){
        $(".plus").on("click", function () {
          $(this).toggleClass("minus");
        });
      });
    });
    
    
    
      //ハンバーガーメニュー開いた時にbodyを固定
      var state = false;
      var pos;
      $(".cp_fullscreenmenu").click(function() {
        if (state == false) {
        pos = $(window).scrollTop();
        $("body").addClass("fixed").css({
          "top": -pos});
         state = true;
        } else {
          $("body").removeClass("fixed").css({
            "top": 0});
         window.scrollTo(0, pos);
            state = false;
          }
      });
    
    });
    
[/code]


CC BY-SA 4.0
2022-03-08T10:03:09.633
86756
2022-03-08T10:03:09.633
51214
question
javascript html css jquery
ハンバーガーメニューを開いている最中bodyはスクロールしない設定にしていたが、メニュー内のドロップダウンを開いた時メニュー内だけでなくbodyもスクロールしてしまいます