使用 matchMedia 的带有香草 javascript 的响应式导航答案

【问题标题】：A responsive nav with vanilla javascript using matchMedia使用 matchMedia 的带有香草 javascript 的响应式导航
【发布时间】：2021-07-15 10:07:28
【问题描述】：

我想创建一个响应式导航，但是当我调整窗口大小时不要运行我的代码，我正在使用 de 函数 matchMedia

// Hamburguer

让 mediaQuery = window.matchMedia('(max-width: 800px)');

让 hamburgerToggle = (mediaQuery) => {

if (mediaQuery.matches) {
    let navItems = document.querySelector('.nav_items');
    let nav = document.querySelector('.nav');

    let hamburger = document.createElement('i')
    hamburger.classList.add('fas', 'fa-bars', 'hamburger');
    let div = document.createElement('div');
    div.appendChild(hamburger);
    nav.appendChild(div);

    // Toggle
    div.addEventListener('click', () => {
        navItems.classList.toggle('show');
    });
    console.log(hamburger);
}

}

汉堡切换（媒体查询）； mediaQuery.addEventListener('load', hamburgerToggle);

【问题讨论】：

标签： javascript

【解决方案1】：

您需要使用更改事件而不是加载。

mediaQuery.addEventListener('change', hamburgerToggle);

【讨论】：

它有效，但现在在 mediaQuery 匹配时创建汉堡包
那是因为你在函数内部创建元素。如果这不是您想要做的，请删除/移动该代码。