JavaScriptで、CSSのプロパティ値を変更したいのですが、2度めの変更（元の値に戻す）ができません。

Question

前提・実現したいこと

作りたいのは、
少しだけ顔を出してるナビ(↓のソースコードJsのnav)をクリックすると全体が現れて(left = '0')、
ナビ上のボタン(SNB)をクリックするとナビが閉じる（もとの少しだけ顔出し状態に戻る(left = '-130px')というものです。

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

CSSのプロパティ値の書き換えで、最初の書き換えはできて、
ナビは現れるのですが、
それをさらに書き換えてもとの値に戻すのが効きません。
ブラウザのconsoleの表示では-130に戻っていることになっているのですが、
実際のWebページの表示では戻りません。

初心者なんでできっとヘンなところでつまづいてるんやと思います。よろしくお願いします。

該当のソースコード

HTML

<nav class="nav"> <div class="SNBtn"><div></div><div></div></div> <ul> ・・(省略)・・ </ul> </nav>

CSS
.SNBtn {
position: relative; width: 11px; ・・(省略)・・ }
.nav { position: fixed; top: 0; left: -130px; ・・(省略)・・ }

Js（html body内、上記</nav>のあとに書いてます）

<script> const nav = document.querySelector('.nav'); const SNB = document.querySelector('.SNBtn'); nav.addEventListener('click', () => { nav.style.left = '0'; }); SNB.addEventListener('click', () => { nav.style.left = '-130px'; console.log(nav.style.left); }); </script>

試したこと

プロパティをbackGroundColorとか他のに換えて試してみましたが、やはり2度めの書き換えが反映されないようです。
ローカル環境があかんのかなと思て、テストサーバにあげてみましたが、それでも（やっぱり）表示されません。

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

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

Answer 1

クラスの付替えでやってみてはどうでしょうか？

<style>
.SNBtn:not(.active){
left:-130px;
}
.SNBtn {
position: absolute;
width:150px;
background-Color:red;
left:0;
}
.nav {
position: fixed;
top: 0;
left:0;
}
</style>
<script>
const nav = document.querySelector('.nav');  
nav.addEventListener('click',()=>{
  document.querySelector('.SNBtn').classList.toggle('active');  
});
</script>
<nav class="nav">
<div class="SNBtn">test</div>
</nav>

Comments

[kujiradesign]

回答ありがとうございました。
先の方の提案で無事解決しました。
とりいそぎお礼まで。

Answer 2

SNBtn 要素は nav 要素の子孫なので、SNBtn 要素をクリックすると、

1. SNBtn 要素の click イベントリスナ
2. nav 要素の click イベントリスナ

の順番で両方が呼ばれます。よって、SNBtn のイベントリスナでスタイルを書き換えても即座に nav のイベントリスナによって上書きされているのでしょう。

• SNBtn 要素のイベントリスナで event.stopPropagation() する
• nav 要素のイベントリスナで event.target.closest('.SNBtn') が真だったらスタイルを変更しない

のどちらかで期待する動作になると思います。

Comments

[kujiradesign]

助かりました。event.stopPropagation()で、すんなり解決しました。
バブリングとかキャプチャリングってことじたい知りませんでした。おかげさまでまた一つ賢くなった気がします。
propagation...プロパガンダのもとになったことばですね。覚えやすいというか・・。
また何かありましたら、よろしくお願いします。ありがとうございました。