メニューを押すたびに交互に文字を変えたい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
ハンバーガーメニューをクリックしたら、メニューが開いて、文字が変わるようにしたいです。
それぞれの動作はできたのですが、同時に処理するのがうまくできなくて困ってこちらに来ました。

動作的には、
①ハンバーガーメニューを押す
②メニューが上からスライドする
③それと同時に<span>で囲んでいる"MENU"を"CLOSE"に置き換える
④もう一度ハンバーガメニューやメニュー以外のところを押すと上にスライドして戻る
⑤それと同時に<span>で囲んでいる"CLOSE"を"MENU"に置き換える

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

②だけ、③だけはできるのですが、同時に動作したら、クリックしたら③と⑤が交互に動作するようにできません。。。

teratailでも調べてみましたが、よくわかりませんでした。。。

使用している言語やバージョンなど

・HTML5
・CSS3
・EJS
/jQuery

該当のソースコード

html
1<!-- ▼ヘッダー▼ -->
2  <header class="Header">
3		<div class="Header__inner">
4			<h1 class="Header__inner__head">
5				<a href="./">
6      		<img src="<%= path.img %>/common/logo.png"  class="Header__inner__head__logo">
7      	</a>
8      </h1>
9      <a href="../order/" class="GhostBtn Btn--brand Header__inner__navBtn">
10      商品のご購入
11    </a>
12    <div class="Header__inner__menuBtn">
13    	<button id="navToggle">
14	    	<span></span>
15	    	<span></span>
16	    	<span></span>
17    	</button>
18      <!-- <button>
19        <img src="<%= path.img %>/common/menu-bar.svg" class="Header__inner__menuBtn--open">
20      </button> -->
21      <span class="Header__inner__menuBtn__nav">MENU</span>
22    </div>
23  	</div>
24  	<!-- 最初は隠れているメニュー -->
25  	<div class="Header__menuSP__inner">
26		    <ul class="Header__menuSP">
27			    <li><a class="Header__menuSP__items" href="<%= path.html %>/">メニューはいる</a></li>
28			    <li><a class="Header__menuSP__items" href="<%= path.html %>/about/">メニューはいる</a></li>
29			    <li>
30			    	<a class="Header__menuSP__itemParent" href="<%= path.html %>/ingredients/">メニューはいる</a>
31			    	<ul>
32			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/ingredients/proteoglycan.html">メニューはいる</a></li>
33			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/ingredients/collagen.html">メニューはいる</a></li>
34			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/ingredients/elastin.html">メニューはいる</a></li>
35			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/ingredients/combination.html">メニューはいる</a></li>
36			    	</ul>
37			    </li>
38			    <li><a class="Header__menuSP__items" href="<%= path.html %>/features/">メニューはいる</a></li>
39			    <li>
40			    	<a class="Header__menuSP__items" href="<%= path.html %>/voice/">メニューはいる</a>
41			    	<ul>
42			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/voice/interview.html">メニューはいる</a></li>
43			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/voice/professional.html">メニューはいる</a></li>
44			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/voice/fan.html">メニューはいる</a></li>
45			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/voice/happy.html">メニューはいる</a></li>
46			    		<li><a class="Header__menuSP__itemChild" href="<%= path.html %>/voice/whitepaper.html">メニューはいる</a></li>
47			    	</ul>
48			    </li>
49			    <li><a class="Header__menuSP__items" href="<%= path.html %>/faq/">メニューはいる</a></li>
50			</div>
51		</div>
52  </header>
53<!-- //▲ヘッダー▲ -->

試したこと

js
1$(function(){
2	$('#navToggle').click(function(){
3			$("Header").toggleClass('navOpen');
4                        $("Header__inner__menuBtn__nav").html('CLOSE');
5			$(".Header__menuSP__inner").slideToggle(500);
6	});
7});

初歩的な質問かと思いますが、どうぞよろしくお願いします。

m.ts10806

2019/01/11 01:10

コード内にはどこにも「文字を置き換える」処理が見当たりませんが、どのようにされたのでしょうか。

m.ts10806

2019/01/11 01:11

あと「<%= path.img %>」のような表現は静的HTMLではないはずです。フレームワーク、または言語をタグに追加し、バージョンなどを環境情報として質問本文に追記してください。

kensaku3

2019/01/11 01:41

ご指摘ありがとうございます。こちら追記修正させていただきました。

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

回答1件

ベストアンサー

js
1    $('#navToggle').click(function(){
2            $("Header").toggleClass('navOpen');
3            if ( $("Header").hasClass('navOpen') ) {
4                        $("Header__inner__menuBtn__nav").html('CLOSE');
5            } else {
6                        $("Header__inner__menuBtn__nav").html('MENU');
7            }
8            $(".Header__menuSP__inner").slideToggle(500);
9    });