.on("click) でaddClass付与した属性値を、もう一度クリックしたにremoveClassで削除する方法

Question

いつもお世話になっております。

モーダルメニューの開閉の際、
開いたときと閉じた時に属性値を追加したり削除したりするなどの
処理を加えたいと思っています。

やりたいこと。

1▼
webサイトにモーダルメニューを実装して、
.menu-mobile をクリックしたらメニューが開くようにする。
これは問題なくできております。

2▼
.menu-mobileをクリックしたら、.mega-menu.openを

mega-menu.closeに切り替える

これをtoggleClassで動作させてました。

3▼
.open .menu-mobileをクリック（メニューを開く）したら

1番の処理 をして、

bodyに .fixed を追加して、ページの高さ分を計算して調整し
現在表示しているメインコンテンツの位置が動かないようにする。

4▼
.close .menu-mobile をクリック（メニュー閉じる）したら

2番の処理 を行って

bodyから .fixed を削除して、ページの高さ分を計算して調整し
勝手にページトップに戻らないようにする。

現在の状況

3 まではうまくいくのですが、

4がうまく動作ません。

４のクリックをすると、removeClassは動かず（fixedが削除されない）、
ページの一番上に戻ってしまいます。

htmlは下記のような状態です。
あらかじめ、div.mega-menuに 予め open という属性値を入れておいて、
toggleClass によって open と close を切り替えています。

   <div class="mega-menu open">

<!-- ↓下をクリックすると↑のmega-menuのopenの部分がクリックするたびにcloseとopenで切り替わります -->
    <a href="#" class="menu-mobile"></a>
    
    
    <ul style="display: block;">
    <li><a href="#">Home</a></li>
    <li class="menu-dropdown-icon"><a href="">About</a>
        <ul>
            <li><a href="">School</a>
                <ul>
                    <li><a href="">Lidership</a></li>
                </ul>
            </li>
            <li><a href="#">Study</a>
                <ul>
                    <li><a href="#">Undergraduate</a></li>
                </ul>
            </li>
            <li><a href="#">Research</a>
                <ul>
                    <li><a href="#">Undergraduate research</a></li>
                </ul>
            </li>
            <li><a href="#">Something</a>
                <ul>
                    <li><a href="#">Sub something</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="menu-dropdown-icon"><a href="">News</a>
        <ul class="normal-sub">
            <li><a href="">Today</a></li>
        </ul>
    </li>
    <li class="menu-dropdown-icon"><a href="">Contact</a>
        <ul>
            <li><a href="#">School</a>
                <ul>
                    <li><a href="#">Lidership</a></li>
                </ul>
            </li>
            <li><a href="#">Study</a>
                <ul>
                    <li><a href="#">Undergraduate</a></li>
                </ul>
            </li>
            <li><a href="#">Study</a>
                <ul>
                    <li><a href="#">Undergraduate</a></li>
                </ul>
            </li>
            <li><a href="#">Empty sub</a></li>
        </ul>
    </li>
    </ul>
    
    
</div>

該当部分のjQueryは以下のような状態です。

jQuery(function($){

// menu-mobileをクリックしたときにmega-menuにopenかcloseを追加する。

$(".menu-mobile").click(function (e) {
$(".mega-menu").toggleClass('open');
$(".mega-menu").toggleClass('close');
$(".mega-menu > ul").slideToggle('show-on-mobile');
e.preventDefault();
});

// 1番 openが追加されているときの処理（これは動作します）
var scrollPosition;
$(".open .menu-mobile").on("click", function() {
scrollPosition = $(window).scrollTop();
$('body').addClass('fixed').css({'top': -scrollPosition});
});

// 2番 closeが追加されているときの処理はこうしたいです（動作しません）
$(".close .menu-mobile").on("click", function() {
$('body').removeClass('fixed').css({'top': 0});
window.scrollTo( 0 , scrollPosition );
});


});

どのようにすれば記述するとよいのでしょうか。

調べてもどうしてもわかりませんでした。どうぞよろしくおねがいします。

Answer 1

下記指定方法では、ページロード時に.openが付いている.menu-mobileにしかクリックイベントが付きません。

$(".open .menu-mobile").on("click"/*略*/)

こういう感じに書き直してみましょう。

$(".menu-mobile").on("click", function (e) {
    e.preventDefault();
    $(".mega-menu").toggleClass('open');
    $(".mega-menu").toggleClass('close');
    $(".mega-menu > ul").slideToggle('show-on-mobile');
    if ( $(".mega-menu").hasClass('open') ) {
        /* OPEN時の処理 */
    } else {
        /* CLOSE時の処理*/
    }
})

Comments

[Novz]

ご教授ありがとうございます。

アドバイスを見ながら以下のように修正してみたのですが、
うまく動作しませんでした。

```

$(".menu-mobile").on("click", function (e) {
e.preventDefault();
$(".mega-menu").toggleClass('open');
$(".mega-menu").toggleClass('close');
$(".mega-menu > ul").slideToggle('show-on-mobile');
if ( $(".mega-menu").hasClass('open') ) {
/* OPEN時の処理 */
var scrollPosition;
$(".open .menu-mobile").on("click", function() {
scrollPosition = $(window).scrollTop();
$('body').addClass('fixed').css({'top': -scrollPosition});
});
} else {
/* CLOSE時の処理*/
$(".close .menu-mobile").on("click", function() {
$('body').removeClass('fixed').css({'top': 0});
window.scrollTo( 0 , scrollPosition );
});
}
})
```

このような挙動をします。
▼
1回目クリック

<body class="">

<div class="mega-menu open">
↓
<div class="mega-menu close">
に変化

▼
2回目クリック
↓
<body class="" style="top: 0px;">

<div class="mega-menu close">
↓
<div class="mega-menu open">
に変化

▼
3回目クリックから fixedが追加されますが、
必ずページトップに戻ってしまいます。

<body class="fixed">

<div class="mega-menu open">
↓
<div class="mega-menu close">
に変化

▼
4回目クリック
↓
<body class="" style="top: 0px;">

<div class="mega-menu close">
↓
<div class="mega-menu open">
に変化

▼
以降3回目と4回目の繰り返し。

どこか私の書き方間違えているのだと思います・・

お手数をおかけしますが、ご教授いただけないでしょうか。

[kei344]

「.on("click"」の中で「.on("click"」を書いている場合それは基本的に間違いです。
関数の中身だけ書きましょう。

[Novz]

kei344様、初歩的な部分で誤っており申し訳ありません。
ご指導ありがとうございます。

下記のように記述したら意図通りに動作したのですが、

すみません、、恥を忍んでもう一点だけご指導いただけないでしょうか。

CLOSE時、現在のスクロール位置を取得して表示位置を維持させたいのですが、
私の書き方だとCLOSE時にトップ位置まで戻ってしまいます。

OPEN時はスクロール位置の高さを取得できているのでなんとかならないかと
色々やってみたのですがうまく動かすことができませんでした。

$(".menu-mobile").on("click", function (e) {
e.preventDefault();
scrollPosition = $(window).scrollTop();
var scrollPosition;
$(".mega-menu").toggleClass('close');
$(".mega-menu > ul").slideToggle('show-on-mobile');
if ( $(".mega-menu").hasClass('close') ) {
/* OPEN時の処理 */
$('body').addClass('fixed').css({'top': -scrollPosition});
} else {
/* CLOSE時の処理*/
$('body').removeClass('fixed').css({'top': 0}).scrollTop(0,scrollPosition);
}
});

いくつも質問してしまい申し訳ありません。

何卒よろしくおねがいします。

[kei344]

scrollPosition の値がどの場合のときに、どういう値になっているかをconsole.logで確認して、どういう値が入っている必要があるか考えてみてください。
いくつか試して意図した結果にならないなら、新たに質問をされてはいかがでしょうか。その際には試行したコードも一緒に提示することをお勧めします。

【JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita】
https://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

[Novz]

kei344様

いろいろとご指導ありがとうございました。
まずは上記のコードで質問した問題は解決しましたのでベストアンサーにさせていただきました。

CLOSEしたときの結果については、教えてもらった方法チェックしてどうしても意図したとおりに動かなければまた相談させてください。

今後ともよろしくおねがいします。