Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/464.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 垂直侧边栏导航菜单可通过一个按钮折叠_Javascript_Menu_Navigation_Sidebar - Fatal编程技术网

Javascript 垂直侧边栏导航菜单可通过一个按钮折叠

Javascript 垂直侧边栏导航菜单可通过一个按钮折叠,javascript,menu,navigation,sidebar,Javascript,Menu,Navigation,Sidebar,我正在尝试创建一个简单的侧边栏导航,它的工作方式类似于此网站上的菜单--> 基本上,我试图创建一个菜单,第一次单击按钮打开菜单,然后单击同一个按钮关闭菜单,但菜单仍然可见 我开始在w3schools上使用这个示例,但它有两个按钮,而不是一个。我试着编辑按钮,使其具有双向工作的关闭按钮,但根本不起作用 有谁能帮我或指导我学习教程吗?您可以删除openbtn按钮,只需将closebtn保留在HTML中即可 在CSS中更改此选项: .sidebar { width: 35px } .sidebar

我正在尝试创建一个简单的侧边栏导航,它的工作方式类似于此网站上的菜单-->

基本上,我试图创建一个菜单,第一次单击按钮打开菜单,然后单击同一个按钮关闭菜单,但菜单仍然可见

我开始在w3schools上使用这个示例,但它有两个按钮,而不是一个。我试着编辑按钮,使其具有双向工作的关闭按钮,但根本不起作用


有谁能帮我或指导我学习教程吗?

您可以删除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 = "☰";
  }
}