我无法使侧边栏按钮沿 HTML,CSS 中的侧边栏移动
[英]I could not make the sidebar button move along the sidebar in HTML,CSS
问题描述
Hello Im trying to create a sidebar for a website of mine that that has open/close button that moves along with it.
您好，我正在尝试为我的网站创建一个侧边栏，该侧边栏具有随它一起移动的打开/关闭按钮。
I am basing my code this example of w3school in the example there are two separate buttons for opening and closing.我的代码基于这个w3school的示例，在示例中有两个单独的按钮用于打开和关闭。 I dont like having two separate buttons for the task and would like to combine them.我不喜欢有两个单独的按钮来完成任务，我想将它们组合起来。 So i modified the example to this:所以我将示例修改为：
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> 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,} } </style> </head> <body> <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> <script> 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"; } } </script> </body> </html>
If you try running the code the when you click the button for the first time, the sidebar opens and the button goes along with it.如果您在第一次单击按钮时尝试运行代码，侧边栏会打开并且按钮会随之打开。 That is great and what i wanted it to do, The problem is when closing the sidebar the button does not go back to its original position.太好了，我想要它做的，问题是当关闭侧边栏时，按钮不会 go 回到原来的 position。 The sidebar opens and close no problem but it would seem that this line of code is not working侧边栏打开和关闭没有问题，但是这行代码似乎不起作用
document.getElementById("sidebarButton").style.Left = "0px";
Any idea how to fix it?知道如何解决吗？
2 个解决方案
解决方案1
1 已采纳 2020-04-17 15:28:04
Although style properties are case-insensitive inside of stylesheets, the JavaScript API for styles is case-sensitive.尽管样式表内部的样式属性不区分大小写，但 styles 的 JavaScript API 区分大小写。 Therefore, setting style.Left won't work since the correct property name is left .因此，设置style.Left将不起作用，因为正确的属性名称是left 。
document.getElementById("sidebarButton").style.left = '0';
解决方案2
1 2020-04-17 15:28:28
You have a typo mistake document.getElementById("sidebarButton").style.Left should be document.getElementById("sidebarButton").style.left你有一个拼写错误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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.