他のエリアをクリックしドロワーメニューを閉じた際に、ハンバーガーボタンもクリック前の状態に戻したい

Question

お世話になっております。よろしくお願いします。

表題の通りです。
ハンバーガーボタンをクリックするとドロワｆーメニューが開いたり閉じたりしますが、
.wrapper　をクリックした際にもドロワーメニューを閉じる動作を追加しました。
しかしハンバーガーボタンを連動させることができません。
addclass とか removeclassさせるためにクラス名を付与するべきでしょうか？
考え方がわかっておらず。。。

ご教示いただけますと助かります。
どうぞよろしくおねがいします。

<header>
<h1 id ="logo"></h1>
<!--ハンバーガーボタン-->
<label for="js-buttonHamburger" class="sidebarIconToggle">
<button type="button" id="js-buttonHamburger" class="c-button p-hamburger" aria-controls="setting" aria-expanded="false">	  
<span class="p-hamburger__line">
<span class="u-visuallyHidden">
メニューを開閉する
</span>
</span>
</button></label>
<!--ハンバーガーボタン終了-->
<nav class="navi">
<ul id="setting">
<li class="setting_logo"></li>
<li class="settiing_ver">なんらかの文章</li>
<li class="setting_aboutus">なんらかの文章2番目</li>
<li class="setting_from">なんらかの文章3番目</li>
</ul>
</nav>
</header>
<main class="wrapper">
</main>

/*ハンバーガーボタン*/
 .c-button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
	
}


.p-hamburger {
  position: fixed;
  top: 10px;
/*  bottom: 0;
  left: 0;*/
  right: 0%;
width: 80px;
  height: 80px;
	background-color: transparent;
  margin: 0 auto;
z-index: 100;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}
/*.p-hamburger:hover,
.p-hamburger:focus {
  box-shadow: 0 0 .5rem rgba(0, 0, 0, .5 );
}*/
.p-hamburger::after{
	display: block;
	content: "";
	position: absolute;
	top:80px;

	left:18px;

	transition: all .5s ease;
	
}

.p-hamburger[aria-expanded="true"]::after{
	display: block;
	content: "";
	left:16px;
	
	
}
.p-hamburger__line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 30px;
  height: 3px;
	
  background-color: #fff;
  -webkit-transition: inherit;
          transition: inherit;
}

.p-hamburger__line::before,
.p-hamburger__line::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: inherit;
  content: '';
  -webkit-transition: inherit;
          transition: inherit;
}

.p-hamburger__line::before {
  top: -12px;
}
.p-hamburger__line::after {
  top: 12px;
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line {
  background-color: transparent;
	transform: rotateZ(180deg);
	
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
  top: 0;
  background-color: #fff;
	
	
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
	  width: 120%;
  height: 100%;
	
	
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
  -webkit-transform: rotate(-35deg);
      -ms-transform: rotate(-35deg);
          transform: rotate(-35deg);
	  width: 120%;
  height: 100%;
	
}
.p-hamburger:focus{
	outline: none;
}

.u-visuallyHidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%); 
  margin: -1px;
}

/*ハンバーガーボタン終了*/	
	/*ナビゲーション*/
.navi {
 max-height: 812px;
	min-height: 812px;
	height: 812px;
    position: fixed;
    right: 0;
	top:0px;
   width: 0%;
	
	transform: translateX(100%);
background-color: #BE004A;
    z-index: 5;
	transition: all 1s ease;
	visibility: hidden;
} 
.navi.open{
  max-height: 812px;
	min-height: 812px;
	height: 812px;
    position: fixed;
    right: 0;
    width: 80%;
	transform: translateX(0%);
background-color: #BE004A;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: -150px -160px;
	visibility: visible;
  z-index: 5;
	
	

}
	#setting{
		margin-top:180px;
		text-align: center;
		font-family:"Lato", "sans-serif";
		color: #fff;
	}
	.setting_logo{
		background-image: url("../image/logo_large_white.svg");
		width:176px;
		height: 150px;
		background-repeat: no-repeat;
		margin:0 auto;
		
	}
	.settiing_ver{
		margin-top:18px;
	}
	.setting_aboutus{
		margin-top:60px;
	}
	.setting_from{
		margin-top:198px;
		font-size:1.2rem;
	}

	  //ハンバーガーボタンの動作
(function () {
  $('#js-buttonHamburger').click(function () {
    $('body').toggleClass('is-drawerActive');

    if ($(this).attr('aria-expanded') == 'false') {
      $(this).attr('aria-expanded', true);
    } else {
      $(this).attr('aria-expanded', false);
    }
  });
}) ();
	  
//ドロワーメニューが開く
$(function(){
  $('.sidebarIconToggle').click(function(){
  //要素のクラス名がnavibgからopenに切り替わる
  $('.navi').toggleClass("open");
  });

});
//ハンバーガーボタン以外の場所をクリックしても閉じる	  
	 $(function(){
  $('.wrapper').click(function(){
  //要素のクラス名がnavibgからopenに切り替わる
  $('.navi').toggleClass("open");
	
	  
  });

});

Answer 1

こうするとどうでしょうか。

//ハンバーガーボタン以外の場所をクリックしても閉じる      
     $(function(){
  $('.wrapper').click(function(){
  //要素のクラス名がnavibgからopenに切り替わる
  $('.navi').toggleClass("open");
    if ($('#js-buttonHamburger').attr('aria-expanded') == 'false') {
      $('#js-buttonHamburger').attr('aria-expanded', true);
    } else {
      $('#js-buttonHamburger').attr('aria-expanded', false);
    }

  });

});

Comments

[ema-material]

ありがとうございます。解決しました。
おっしゃるとおり、上部に書いてあるハンバーガーボタンの挙動と同じにしたいだけなので、
とくにクラス名などを付与する必要もなかったです。

解決していただいたこと
考え方を単純化していただいたこと、感謝します。ありがとうございます。