【ハンバーガーメニュー】"aria-expand"を変更してもcssが反映されない

こちらのサイトを参考にさせて頂きながら、ハンバーガーメニューを作成しています。
https://shibajuku.net/make-hamburger-button/

おそらくjs の問題だと思うのですが

Javascript
1jQuery(function(){
2    jQuery("#navbutton").click(function() {
3      jQuery("body").toggleClass('is-drawerActive');
4      jQuery("#header-nav-wrap").slideToggle();
5
6      if (jQuery("#navbutton").attr('aria-expand') == 'false') {
7        jQuery("#navbutton").attr('aria-expand', true);
8      } else {
9          jQuery("#navbutton").attr('aria-expand', false);
10      }
11    });
12});

HTML
1<button type="button" id="navbutton" class="c-button p-hamburger" aria-controls="header-nav-wrap" aria-expanded="false">
2   <span class="p-hamburger__line">
3      <span class="u-visuallyHidden">
4        メニューを開閉する
5      </span>
6   </span>
7</button>

if文で"aria-expand"をクリックするたびに"false"↔"true"が入れ替わり、CSSの

CSS
1.p-hamburger[aria-expanded="true"] .p-hamburger__line {
2  background-color: transparent;
3}
4
5.p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
6.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
7  top: 0;
8  background-color: #f9d8ae;
9}
10
11.p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
12  -webkit-transform: rotate(45deg);
13      -ms-transform: rotate(45deg);
14          transform: rotate(45deg);
15}
16
17.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
18  -webkit-transform: rotate(-45deg);
19      -ms-transform: rotate(-45deg);
20          transform: rotate(-45deg);
21}

この部分が適用されて、動作が起こると認識しています。
実際にこのコードを適用し、デベロッパーツールで見てみると、
"aria-expand"は切り替わるのですが、CSSのアニメーションが反映されません。

Javascriptコードのif文部分をコメントアウトして、
デベロッパーツールで直接"aria-expand=false"を"true"と変更すると、CSSが反映されます。

Javascriptのコードがおかしいのかなと考えています。
自分で頑張ってみましたが、解決できませんでした。
ご回答よろしくお願いいたします。

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

回答1件

ベストアンサー

typoです。
aria-expand → aria-expanded

js
1jQuery(function(){
2    jQuery("#navbutton").click(function() {
3      jQuery("body").toggleClass('is-drawerActive');
4      jQuery("#header-nav-wrap").slideToggle();
5
6      if (jQuery("#navbutton").attr('aria-expanded') == 'false') {
7        jQuery("#navbutton").attr('aria-expanded', true);
8      } else {
9          jQuery("#navbutton").attr('aria-expanded', false);
10      }
11    });
12});