クリックした要素だけ背景色を変えたい

メニューをクリックしたら中身が開くようになっています。
これは問題なくできているのですが、わかりやすく開いてるメニュー(span)の背景色を変えたくて
$(this).css('background-color','#cfcfcf');　を付け足したのですが、これだと色が戻らず変わったままになってしまいます。
クリックした要素以外は色が変わらないようにするにはどこを変えたらいいのか教えてください、、、

<div class="menu"> 
          <span class="open" id="open01">1</span>
	      <span class="open" id="open02">2</span>
		 <span id="open03" class="open">3</span>
		</div>
		
     <div class="open01 in">
        1の中身
     </div>

<div class="in open02">
2の中身
</div>

<div class="in open03">
3の中身
</div>

<script>
$(function(){
    $('.in').hide();
      $('.open').on('click',function(){
     /*クリックした要素の ID と違うクラスのセクションを非表示*/
　　 $('.in').not($('.'+$(this).attr('id'))).hide();
	 /*クリックした要素の ID と同じクラスのセクションを表示*/
        $('.'+$(this).attr('id')).show();
		  $(this).css('background-color','#cfcfcf');	
    });	
});	
  </script>

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

回答1件

ベストアンサー

idとclassで紐づけると融通がきかない作りになりそうですね
またhtml要素のcssを直接書き換えるのも微妙です（クラス付外しなどで対応した方がよいかも）

javascript
1$(function(){
2  $('.in').hide();
3  $('.open').on('click',function(){
4    $('.in').show().not($('.'+$(this).attr('id'))).hide();
5    $('.open').css('background-color','#cfcfcf').not(this).css('background-color','');
6  });	
7});
8