Javascript mediaMatch问题，移动规则停留在桌面模式

这是我的js代码。如你所见，我有两条规则。一个用于桌面，另一个用于移动设备。 当页面在桌面模式下加载时，并没有问题，我也可以切换到移动模式，并没有问题。但当我从移动模式转到桌面模式时，移动模式的规则仍然有效。所以导航栏的作用与桌面模式下的移动模式相同。 我希望我明白了。请给我一个解决方案。 我甚至尝试将evenlistener添加到窗口以调整案例大小，但这并没有帮助

const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
const mobile_menu = document.querySelector('.header .nav-bar .nav-list ul');
const menu_item = document.querySelectorAll('.header .nav-bar .nav-list ul li a');


function click_on_hamburger() {
    hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('active');
        mobile_menu.classList.toggle('active');
    })
}

function click_on_item() {
    if (window.matchMedia("(max-width:1200px)").matches) {
        menu_item.forEach((item) => {
            item.addEventListener('click', () => {
                hamburger.classList.toggle('active');
                mobile_menu.classList.toggle('active');
            })

        })
    }
}

window.addEventListener('load', () => {
    click_on_hamburger()
    click_on_item()
})
window.addEventListener('resize', () => {
    click_on_hamburger()
    click_on_item()
})