javascript - 右侧0％至-100％的侧边栏无法隐藏(sidebar with right 0% to -100% can't hide)

Question

I use below code for my left sidebar and display on a browser is hide/show, but didn't work on the right sidebar note: sidebar still visible on the browser (button scroll appears)(我在左侧边栏上使用以下代码，并且在浏览器上的显示是隐藏/显示，但在右侧边栏上却不起作用。注意：边栏在浏览器上仍然可见（出现按钮滚动）)

<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(的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(JS) function Toggle(){ let x = document.getElementById("right-sidebar") if ( x.style.right == "0%" ) x.style.right = "-100%"; else { x.style.right = "0%"; } }   ask by tapriandi translate from so

Answer 1

Use px values instead of % and move button outside of the div - to make is visible all the time.(使用px值而不是％并将按钮移到div之外-使其始终可见。)

JS Logic: You listen to the click event on the button.(JS Logic：您监听按钮上的click事件。) If the button is clicked - than you manipulate the position of the sidebar using the "right" property(如果单击该按钮，那么您可以使用“ right”属性来控制侧栏的位置)