我无法使侧边栏按钮在 HTML、CSS 中沿着侧边栏移动

Question

您好，我正在尝试为我的网站创建一个侧边栏，该侧边栏具有随其移动的打开/关闭按钮。我的代码基于w3school的示例，该示例中有两个单独的按钮用于打开和关闭。我不喜欢有两个单独的按钮来完成任务，并且想将它们组合起来。所以我将示例修改为：如果您尝试运行代码，那么当您第一次单击该按钮时，侧边栏将打开并且按钮也会随之打开。这很棒，也是我想要的，问题是关闭侧边栏时按钮不会返回到其原始位置。侧边栏打开和关闭没有问题，但似乎这行代码不起作用document.getElementById("sidebarButton").style.Left = "0px";知道如何修复它吗？

Answer 1

尽管样式属性在样式表内部不区分大小写，但样式的 JavaScript API 区分大小写。因此，设置style.Left将不起作用，因为正确的属性名称是left。

document.getElementById("sidebarButton").style.left = '0';

Answer 2

你有一个拼写错误document.getElementById("sidebarButton").style.Left应该是document.getElementById("sidebarButton").style.left

var lastState = false;

function sideButtonClicked() {

  if (!lastState) {

    //open

    lastState = true

    document.getElementById("mySidebar").style.width = "250px";

    document.getElementById("main").style.marginLeft = "250px";

    document.getElementById("sidebarButton").style.left = "250px";

  } else {

    //close

    lastState = false

    document.getElementById("mySidebar").style.width = "0px";

    document.getElementById("main").style.marginLeft = "0px";

    document.getElementById("sidebarButton").style.left = "0px";

  }

}

body {

  font-family: "Lato", sans-serif;

}

.sidebar {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #111;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 60px;

}

.sidebar a {

  padding: 8px 8px 8px 32px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

  transition: 0.3s;

}

.sidebar a:hover {

  color: #f1f1f1;

}

.openbtn {

  font-size: 20px;

  cursor: pointer;

  position: fixed;

  bottom: 50%;

  left: 0;

  background-color: #111;

  color: white;

  padding: 10px 15px;

  border: none;

  z-index: 1;

  transition: 0.5s;

}

.openbtn:hover {

  background-color: #444;

}

#main {

  transition: margin-left .5s;

  padding: 16px;

}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {

  .sidebar {

    padding-top: 15px;

  }

  .sidebar a {

    font-size: 18px;

  }

}

<div id="mySidebar" class="sidebar">

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Clients</a>

  <a href="#">Contact</a>

</div>

<div id="main">

  <button id="sidebarButton" class="openbtn" onclick="sideButtonClicked()">☰</button>

  <h2>Collapsed Sidebar</h2>

  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>

</div>