Javascript 右侧为0%至-100%的侧边栏可以'；隐藏

我在左侧边栏使用下面的代码，在浏览器上显示为hide/show，但在右侧边栏上不起作用 注意：侧边栏在浏览器上仍然可见（显示按钮滚动）

JS

---

为什么不使用class

hidden

并切换添加和删除类？您需要更改

位置：绝对至<代码>位置：固定最后我可以通过添加
最大宽度：100%来解决我的问题；溢出-x:在主体上隐藏
<div id="right-sidebar">
  <div class="content-right">

    <div class="row">
      <div class="col">
        <p>this column 1</p>
      </div>
      <div class="col">
        <p>this column 1</p>
      </div>
      <div class="col">
        <p>this column 1</p>
      </div>
    </div>

    <button class="close-right" onclick="Toggle()">
      <img src="./images/arrow.png" alt="">
    </button>
  </div>
</div>

#right-sidebar {
  align-items: center;
  position: absolute;
  display: flex;
  max-width: 50%;
  height: 900px;
  right: -100%;
  transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
  background-color: #fff;
  box-shadow: 0 0 30px gray;
}

function Toggle(){
  let x = document.getElementById("right-sidebar")
  if ( x.style.right == "0%" ) x.style.right = "-100%";
  else {
    x.style.right = "0%";
  }
}