toggleClassでクリックした要素の親要素にクラスをつけ外ししたい

前提・実現したいこと

よくあるハンバーガーメニューの作成で行き詰っています。
toggleClassで、要素をクリックするとその親要素にクラスが付与されるという状況を作りたいです。
➡#SP-menuをクリックすると#Right-menuに.openが付与される

発生している問題・エラーメッセージ

toggleClassが効きません。
F12で確認すると、クリックすると親要素に class　という文字はつくのですが
肝心の class　「="open"」部分がないのです。

という状態になってしまいます。

正しくは

にしたいです。

該当のソースコード

HTML
1             <div id="Right-menu">
2                <div id="SP-menu">
3                    <span></span>
4                    <span></span>
5                    <span></span>
6                    <span class="text"></span>
7                </div>
8             </div>

jQuery
1$("#SP-menu").on('click', function() {
2            $(this).parent().toggleClass("open");
3        });

試したこと

クラス名が競合しているのかと思い、別のものに変更しても同じ結果です。

何か見落としている箇所あればご指摘頂ければ幸いです。

kyoya0819

2019/09/27 02:03

状況を再現することができません。 https://codepen.io/asuchi0819/pen/qBWwxYP 一部わかりやすくするためにCSSを適用させています。

samiA

2019/09/27 02:12

何故でしょう・・・ほかの要素で競合しているのかもしれないです。ありがとうございます。

kyoya0819

2019/09/27 02:15

まさかjQueryを読み込んでいないってことはないですよね？

samiA

2019/09/27 02:17

すぐ上で読み込んでいるんです・・・。

kyoya0819

2019/09/27 02:18

bodyの閉じタグの直前に書いて見たらどうでしょうか？

samiA

2019/09/27 02:19

HTMLを質問で記載しているものだけにしてみたところ無事作動しました。 classはついてもclass名がつかないエラーというのは見たことがありませんでした。原因箇所はまだわかっていませんが、とりあえず解決致しましたのでご報告させていただきます。

行動規範の内容に同意します

回答1件

ベストアンサー

見た感じ普通にうごきます
（文字がなにもないとさわれないので一部調整してあります）

javascript
1<script>
2$(function(){
3  $("#SP-menu").on('click', function() {
4    $(this).parent().toggleClass("open");
5  });
6});
7</script>
8<div id="Right-menu">r
9   <div id="SP-menu">s
10       <span>1</span>
11       <span>2</span>
12       <span>3</span>
13       <span class="text">4</span>
14   </div>
15</div>