javascript - 需要按钮来显示和隐藏叠加导航

Question

我正在制作菜单。我有一个打开它的按钮，我也想要那个按钮关闭它。我有另一个按钮可以关闭它，但这不是我想要的。谁能告诉我这是如何完成的？这是我的 JSBIN

我是这样打开的

<div class="burgerburger" onclick="openNav()">&#9776; open</div>

这是我正在使用的javascript

function openNav() {
    document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}

感谢您的帮助!

Answer 1

应该像这样简单，但是如何确定“navOpened”取决于你

<div class="burgerburger" onclick="toggleNav('myNav')">&#9776; open</div>

js

function toggleNav(selector) {
    if(navOpened(selector)) {
        closeNav(selector);
    } else {
        openNav(selector);
   }
}     

function navOpened(selector) {
    var elWidth = document.getElementById(selector).style.width;
    if(elWidth == "100%") { 
        return true; 
    } else { 
        return false; 
    }
}

function openNav(selector) {
    document.getElementById(selector).style.width = "100%";
}

function closeNav(selector) {
    document.getElementById(selector).style.width = "0%";
}