【jQuely】ハンバーガーメニューが正しく動作しない

Question

ヘッダー内でハンバーガーメニューを作ろうとしています。(SPサイズから対応)

jQuelyでトグル切り替えで作ろうとしていますが、思うような動作になりません。
具体的にいうと、
「クリックイベントを起こした後、.header__nav-listspが表示されますが、そのすぐに非表示になってしまいます」

やりたいことは、#menubtnのクリックイベントでの.header__nav-listspの表示、非表示の切り替えです。

おそらく、クリックしたタイミングで意図しないdisplay:noneが動いているのではないかと予想していますが、該当箇所が見つけられません。

よろしくお願いいたします。

    <header>
        <div class="header__inner">
            <div class="header__company-logo">
                <img src="./images/logo.png" alt="株式会社">
            </div>

            <nav class="header__nav">
                <ul class="header__nav-list" id="s_01">
                    <li><a href="#scrool__1" class="nav-item">スクールの特徴</a></li>
                    <li><a href="#scrool__2" class="nav-item">学べるスキル</a></li>
                    <li><a href="#scrool__3" class="nav-item">スケジュール</a></li>
                    <li><a href="#scrool__4" class="nav-item">講師紹介</a></li>
                    <li><a href="#scrool__5" class="nav-item">よくある質問</a></li>
                    <li><a href="#scrool__6" class="nav-item">募集要項</a></li>
                </ul>


                <ul class="header__nav-listsp" id="s_01">
                    <li><a href="#scrool__1" class="nav-item">スクールの特徴</a></li>
                    <li><a href="#scrool__2" class="nav-item">学べるスキル</a></li>
                    <li><a href="#scrool__3" class="nav-item">スケジュール</a></li>
                    <li><a href="#scrool__4" class="nav-item">講師紹介</a></li>
                    <li><a href="#scrool__5" class="nav-item">よくある質問</a></li>
                    <li><a href="#scrool__6" class="nav-item">募集要項</a></li>
                </ul>
            </nav>



            <div class="hamburger-menu" id="menubtn">
                <input type="checkbox" id="menu-btn-check">
                <label for="menu-btn-check" class="menu-btn"><span></span></label>
            </div>

        </div>
    </header>
コード

.header__inner{
    width: 100%;
    height: 96px;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__company-logo{
   max-width: 180px;
   min-width: 160px;
   margin-right: 88px;
}
.header__nav{
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}
.header__nav-list{
    /* pc版のメニュー */
    display: none;
}
.nav-item {
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
  .nav-item::after {
    position: absolute;
    bottom: -5px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #282828;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
  }
  .nav-item:hover::after {
    transform: scale(1, 1);
  }
  .header__nav-listsp{
    display: block;
    background-color: #fff;
    border: solid 1px #000;
    width: 60%;
    height: 100vh;
    z-index: 100;
    font-weight: bold;
    font-size:2.4vw;
    padding: 68px;
    z-index: 100;
    position: fixed;
    top:0;
    right:0;
}
.header__nav-listsp li{
    margin-bottom: 16px;
}



/* ハンバーガーメニュー */
.hamburger-menu{
    display: block;
    position: fixed;
    z-index: 101;
}
#menu-btn-check{
    display: none;
}
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 56px;
    width: 56px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #2f2f2f;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
/* //ハンバーガーメニュー */

/* //ヘッダー */
コード

  //ハンバーガーメニュー
  $(function(){
    $(".header__nav-listsp").hide();
    $("#menubtn").click(function(){//メニューボタンをクリックしたとき
        $(".header__nav-listsp").toggle(300);//0.3秒で表示したり非表示にしたりする
    });
});
コード

Answer 1

#menubtn ではなく、#menu-btn-check のクリックイベントにするといいでしょう。

//ハンバーガーメニュー
$(function(){
  $(".header__nav-listsp").hide();
  $("#menu-btn-check").click(function(){//メニューボタンをクリックしたとき
    $(".header__nav-listsp").toggle(300);//0.3秒で表示したり非表示にしたりする
  });
});

なぜそうなるかというと イベントのバブリングという現象ですね。長くなるのでWEB検索で調べてみてください。

Comments

[退会済みユーザー]

解決しました！！ありがとうございました！

Answer 2

javascriptに以下のコードを追記しました。
event.preventDefault();

蛇足ではありますが、
hide()をコメントアウトしてCSS側でdisplay:none;としてあげたほうが、
画面描画時にちらっと見えないので良いかもです。

$(function(){
        // $(".header__nav-listsp").hide();
        $("#menubtn").click(function(){//メニューボタンをクリックしたとき
            $(".header__nav-listsp").toggle(300);//0.3秒で表示したり非表示にしたりする
            event.preventDefault();//これを追記しました
        });
    });

.header__nav-listsp{
    display: none;

Answer 3

グーグル検索で「click event label」と入力したところ、「click event label jquery」と補完されました。一番上はこれでした。

【jQuery】ラベルで囲まれたチェックボックスでclickイベントが2回実行される - Qiita