JQueryを使用したスマホようのメニューでナビメニューの開閉時、メニューボタンの文字を切り替えたい

質問させていただきます。

初めての投稿のため、不備やおかしなところがあった際は教えていただければと思います。

現在スマホ用のサイト作りを練習しており、ナビメニューを表示する際JQueryを使用してナビメニューの開閉を行いたいと考えております。

開閉は思い通りにできたのですがテキストの切り替えがうまくいきません。

<div class="side-menu-btn" id="js__sideMenuBtn"><div class="btn_text">MENU</div></div> side-menu-btnがクリックされた際、子要素のbtn_textのMENUの文字をCLOSEに切り替えたのですが思い通りにならないです。

JQueryを勉強し始めたばかりなので書き方が間違っていると思いますが他にいろいろためしましたが自分では解決できません。

解決方法や参考になるサイト等ございましたらご教授の程、よろしくお願いいたします。

html

<body>
  <!-- サイドオープン時メインコンテンツを覆う -->
  <div class="overlay" id="js__overlay"></div>

  <!-- サイドメニュー -->
  <nav class="side-menu" >
    <ul>
      <li><a href="#">メニュータイトル</a></li>
      <li><a href="#">メニュータイトル</a></li>
      <li><a href="#">メニュータイトル</a></li>
    </ul>
  </nav>

  <!-- 開閉用ボタン -->
  <div class="side-menu-btn" id="js__sideMenuBtn"><div class="btn_text">MENU</div></div>

  <!-- メインコンテンツ -->
  <div class="wrapper">
    <header class="header">
      <h1>ヘッダータイトル</h1>
      <p>ヘッダー</p>
    </header>

    <footer class="footer">
      <p>フッター</p>
    </footer>
  </div>


<?php wp_footer(); ?>
</body>

$(function(){


//メインメニュー
    var $body = $('body');
    $('#js__sideMenuBtn').on('click', function () {
	$body.toggleClass('side-open');
    $('#js__overlay').on('click', function () {
	$body.removeClass('side-open');
    });
    });

//文字の切り替え
    $('.side-menu-btn').on('click', function () {
	$('this').children('.btn_text').text('CLOSE');
    $('.side-menu-btn').on('click', function () {
	$('this').children('.btn_text').text('MENU');
    });
    });


});

css

/* サイドオープン時にメインコンテンツを覆う部分 */
.overlay {
  /* content: ''; */
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;

  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 3;
}
.overlay::after {
  /* content: "この部分をクリックで閉まる"; */
  visibility: hidden;
  position: fixed;
  top: 40%;
  left: 0;
  display: block;
  width: 100%;
  height: 100px;
  color: rgba(255,255,255,0);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.side-open .overlay {
  visibility: visible;
  cursor: pointer;
  background: rgba(0,0,0,.7);
}
.side-open .overlay::after {
  visibility: visible;
  color: rgba(255,255,255,.8);
}

/* サイドメニュー */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 600px;
  height: 100%;
  padding-top: 150px;
  text-align: center;
  font-size: 26px;
  background: #008de5;
  z-index: 1;
  visibility: hidden;
}

/* 開閉用ボタン */
.side-menu-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 160px;
  height: 40px;
  padding: 20px 0;
	text-align: center;
  background: #d7d7d7;
  cursor: pointer;
  z-index: 4;
}

.btn_text {
	font-size: 30px;
}

/* メインコンテンツ */
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 13px;
  background: #F8F8F8;/* 意味なし */
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}
/* メインコンテンツ内のスタイル */
.header {
  padding: 100px 0;
  background: #161616;
  color: #fff;
}
.header h1,
.contents h1 {
  margin-bottom: 30px;
  font-size: 20px;
}
.contents {
  width: 100%;
  padding: 150px 0;
  background: #f5f5f5;
}
.contents p {
  margin-bottom: 50px;
}
.footer {
  padding: 150px 0;
  background: #fff;
}

/* サイドメニューオープン */
.side-open .wrapper,
.side-open .overlay {
  -webkit-transform: translate3d(-600px, 0, 0);
  transform: translate3d(-600px, 0, 0);
}

.side-open .side-menu {
  visibility: visible;
}

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

回答2件

jQuery
1    $('.side-menu-btn').on('click', function () {
2        $(this).children('.btn_text').text($body.hasClass('side-open') ? 'CLOSE' : 'MENU');
3    });

$('#js__overlay').on()も何度も走っているようなので外に出してください。

投稿2018/09/05 08:11

x_x

総合スコア13749

jks

2018/09/05 08:51

ご回答ありがとうございます。何度も走る処理は1度にするか変数に入れておく。しっかり覚えておきます。今の自分では? 'CLOSE' : 'MENU'の部分が理解できていませんので調べます！

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

ベストアンサー

シングルクォートはいらないような気が。。
$('this')
↓
$(this)

投稿2018/09/05 05:42

編集2018/09/05 05:43

mayoi_maimai

総合スコア1583

jks

2018/09/05 08:00

ご回答ありたとうございます！おっしゃる通りでした。しかし文字の切り替えが1度しか発動しないです。 CLOSEに変わった後MENUに戻るのですが、その後MENUを押下してもMENUのままです。なぜでしょうか？

mayoi_maimai

2018/09/05 08:26

もっといい方法があると思いますが以下でどうでしょう？ $(function(){ $('#js__sideMenuBtn').click(function () { $('body').toggleClass('side-open'); var txt = $('.btn_text').text() == 'CLOSE' ? 'OPEN' : 'CLOSE'; $('.btn_text').text(txt); }); });

jks

2018/09/05 08:46

たびたびご回答ありがとうございます。お教えいただいたコードの方が圧倒的にいいです。しかし今の自分では決して書けないコードです。 $('.btn_text').text() == 'CLOSE' ? 'OPEN' : 'CLOSE';は条件分岐かと思いますが .btn_textがCLOSEならの後の?はどういう役割があるのでしょうか？

mayoi_maimai

2018/09/05 10:57

ifの短縮みたいなもので条件演算子？三項演算子？と呼ばれるものです。この例ですと.btn_textがCLOSEの場合に「OPEN」がtxt変数に代入され、それ以外は「CLOSE」が代入されます。【真偽値式】 ? 【真の場合に評価する式】 : 【偽の場合に評価する式 ifだと以下みたいな感じですね。 if ( $('.btn_text').text() == 'CLOSE' ) { txt = 'OPEN'; } else { txt = 'CLOSE' }

jks

2018/09/06 02:24

ご丁寧にありがとうございます！コードがこちらのほうが綺麗なのでこれぐらいのif文を書くならお教えいただいたほうがベストですね♪ 本当にご丁寧にありがとうございました。

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

あなたの回答