一鍵可折疊的垂直側邊欄導航菜單

Question

我正在嘗試創建一個簡單的側邊欄導航，其工作方式類似於本網站上的菜單 -->

https://www.romereborn.org/arch-of-constantine/arch_quiz.html

基本上我正在嘗試創建一個菜單，其中第一次單擊按鈕打開菜單並單擊相同的按鈕關閉菜單但菜單仍然可見。

我開始在 w3schools 上使用這個例子，但它有兩個按鈕而不是一個。 我嘗試編輯按鈕，使其只有一個可以雙向工作的關閉按鈕，但它根本不起作用。

https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp

有人可以幫助我或指導我學習教程嗎？

Answer 1

您可以刪除 openbtn 按鈕，而將 closebtn 保留在您的 HTML 中。

在你的 CSS 中改變這個：

.sidebar { width: 35px }
.sidebar closebtn {right: 0px}
#main { padding-left : 40px }

將您的 javascript 更改為只有 closebtn 的事件：

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
let bool = false;
function closeNav() {
  bool = !bool;
  if (bool) {
    document.getElementById("mySidebar").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.querySelector(".closebtn").innerHTML = "×";
  } else {
    document.getElementById("mySidebar").style.width = "35px";
    document.getElementById("main").style.marginLeft = "0";
    document.querySelector(".closebtn").innerHTML = "☰";
  }
}