jQueryでクラス追加した後の状態に対応した処理を行いたい。

前提・実現したいこと

jQueryについてです。

ボタンをクリックし.bodyクラスへ、.activeクラスを追加
クラスが.body.activeのとき<body></body>をクリックすると .activeを外す

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

下記でなんとか実装は可能になったのですが、
もう少しわかりやすいというか、正確な書き方があれば
ご教授いただきたいです。

該当のソースコード

html
1<body ontouchstart="" class="body">
2<header>
3 <div id="headermenu_btn" class="headermenu_btn">
4  <span></span>
5 </div>
6</header>
7</body>

jQuery
1$(window).on('load',function(){
2  $(function(){
3    $('#headermenu_btn').on('click',function(e){
4      $('.body').toggleClass('active'); //.active追加
5    });
6  });
7});
8
9$(function(){
10  $(document).on('click',function(e) {
11  if(!$(e.target).closest('#headermenu_btn').length) {
12    $('.body').removeClass('active');　//#headermenu_btn以外クリックで　.active追加
13  }
14  });
15});

試したこと

最初に書いたソースが下記になります。
でも、同時に処理されてしまい想定される動きになりません。

jquery
1$(window).on('load',function(){
2  $(function(){
3    $('#headermenu_btn').on('click',function(e){
4      $('.body').toggleClass('active');
5    });
6  });
7  $(function(){
8    $('.body').on('click',function(e){
9      if( $('.body').hasClass('active') ){
10        $('.body').removeClass('active'); //これだと同時に処理されてしまう。
11      }
12    });
13  });
14});

よろしくお願いいたします。

yambejp

2019/12/12 01:38 編集

＞ボタンをクリックし.bodyクラス #headermenu_btnはただのボタンですか？

m.ts10806

2019/12/12 01:39

htmlもご提示ください。あと「正確な書き方」というのはないですよ。仕様通り動いているのでしたらそれが「正確」です。問題、課題を明示してください

seiya_web

2019/12/12 01:40

ページ読み込み後は下記ですが <body class="body"> #headermenu_btnをクリックすると <body class="body active"> とactiveが追加される動きです。

m.ts10806

2019/12/12 01:41

質問は編集できますので。

seiya_web

2019/12/12 01:47

HTML確かに必要ですよね。ありがとうございます！

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

回答1件

ベストアンサー

こういうことですかね？

javascript
1<style>
2body{height:100%;}
3.active{color:red}
4</style>
5<script>
6$(function(){
7  $('#headermenu_btn').on('click',function(e){
8    $('.body').addClass('active');
9    e.stopPropagation();
10  });
11  $('body').on('click',function(e){
12    $('.body').removeClass('active');
13  });
14});
15</script>
16<body>
17<input type="button" id="headermenu_btn" value="headermenu_btn">
18<div class="body">body1</div>
19<div class="body">body2</div>
20<div class="body">body3</div>
21</body>