0

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

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

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

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

▼HTML

<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>

▼CSS

/*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%;
}

▼JS

  //メニュークリックでサブメニューを開く_あいうえお
  $(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;
      }
  });

});

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。