jQueryでclick()イベントの重複について

Question

イタリックテキスト### 前提・実現したいこと

ボタンを1度クリックし、2度目のクリックで元に戻るトグルをjQueryを使って表現したいです。

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

off()メソッドの使いどころが分からない。

該当のソースコード

$('button').on('click', function() {

$('#toggle').stop().slideToggle();

$('#navbar').prependTo('#Toggle');

$('#navbar').css(
  'transform', 'rotate(180deg)'

);

});

試したこと

off()メソッドで、いろいろ試しましたが、うまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あと、トグルしたいならtoggle₍₎にすべきでは？
offはあくまでイベント自体の解除に使うのでは（調べられたならわかるかと思いますが）

[m.ts10806]

HTMLも提示されたほうが良さそうです。

[ressentiment]

「ボタンを1度クリックし、2度目のクリックで元に戻る」という質問では意味がわかりにくいかもしれません。
表示・非表示を切り替えたい、という意味であればm.ts10806様のおっしゃるとおりHTMLもあった方がわかりやすいと思います。

[miyabi_pudding]

題号の、

> イベントの重複について

に関しての言及が質問本文に無いのも気になりますので、それも含めて質問文を調整してください。
理想の挙動と、
現状の挙動を、もっと詳しく記載お願いします。

[m.ts10806]

今のままだと「”jQuery off 使い方”で調べてください」くらいしか言いようがないですしね。。

[Lhankor_Mhy]

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

Answer 1

こんにちは。

off()メソッドの使いどころが分からない。

使う必要はないかと思いました。フラグを使ってはいかがですか？

サンプル

let f=false;
$('#toggle').slideToggle();

$('button').on('click', function() {

$('#toggle').stop().slideToggle();

if (f) {

  $('#navbar').prependTo('body');

  $('#navbar').css(
  'transform', 'rotate(0deg)'

  );

} else {

  $('#navbar').prependTo('#toggle');

  $('#navbar').css(
  'transform', 'rotate(180deg)'

  );

}

f ^= true;
}); 

Comments

[blogdialy]

フラグを使って実行したらうまくいきそうです。曖昧な質問ではありましたが、ご親切にありがとうございます。