Question

我在左侧边栏使用以下代码，并且在浏览器上的显示为隐藏/显示，但在右侧边栏不起作用注意：侧边栏在浏览器上仍然可见（出现按钮滚动）

<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>

CSS

#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;
}

JS

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

Answer 1

使用px值而不是％并将按钮移到div之外-使其始终可见。

JS逻辑：您听按钮上的click事件。如果单击了按钮，则可以使用“ right”属性来控制侧栏的位置

右侧0％至-100％的侧边栏无法隐藏

1 个答案: