Question

我正在制作菜单，我需要将孩子附加在汉堡包上并将其取出。

使用切换添加/删除课程很容易，但是，你会在这里做什么？ Vanilla JavaScript ES5

// MAIN NAVIGATION MENU TOGGLE
var siteNav = document.querySelector(".site-nav"),
    siteHamburger = document.querySelector(".site-header__toggle-button"),
    overlayDiv  = document.createElement('div'),
    menuOverlay = document.createElement('div');
    menuOverlay.className = 'overlay';

function openMenu() {
    siteNav.classList.add('is-active');
    siteHamburger.classList.add('is-active');
    document.body.appendChild(menuOverlay);
}

function closeMenu() {
    document.body.removeChild(menuOverlay);
    siteNav.classList.remove("is-active");
    siteHamburger.classList.remove("is-active");
}



siteHamburger.addEventListener('click', openMenu, false);
siteHamburger.addEventListener('click', closeMenu, false);

Answer 1

添加切换功能，如：

function toggle() {

    if(siteNav.classList.contains("is-active")) {
        return closeMenu();
    }

    return openMenu();
}

然后代替

siteHamburger.addEventListener('click', openMenu, false);
siteHamburger.addEventListener('click', closeMenu, false);

只需调用切换功能

即可

siteHamburger.addEventListener('click', toggle, false);

如何在需要时切换两个功能？ Vanilla JavaScript ES5

1 个答案: