我正在尝试创建一个简单的侧边栏导航,其功能类似于本网站上的菜单->
https://www.romereborn.org/arch-of-constantine/arch_quiz.html
基本上,我正在尝试创建一个菜单,在该菜单中,第一次单击该按钮将打开菜单,然后单击同一按钮关闭菜单,但是菜单仍然可见。
我开始在w3schools上使用此示例,但是它有两个按钮而不是一个。我尝试将按钮编辑为仅具有一个关闭按钮,该按钮可以同时使用,但根本不起作用。
https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp
任何人都可以帮助我或指导我学习教程吗?
答案 0 :(得分:0)
您可以删除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 = "☰";
}
}