javascript - 我的 jQuery 导航菜单有 2 个问题

Question

如果您将窗口大小调整为 600 像素或更小，我会得到 2 个图标而不是一个，即汉堡菜单。

第二个问题是如果单击并关闭汉堡包，并且我将窗口大小调整为超过 600 像素，则整个导航菜单都会中断。

这是jQuery代码

var nav = $('#menu > ul > li');
nav.find('li').hide();
nav.click(function () {
    nav.not(this).find('li').hide();
    $(this).find('li').slideToggle();
});

function openNav() {
    document.getElementById("open").style.display = "none";
    document.getElementById("close").style.display = "block";
    $('#menu ul').slideToggle();
}

function closeNav() {
    document.getElementById("open").style.display = "block";
    document.getElementById("close").style.display = "none";
    $('#menu ul').slideToggle();
}

$(function () {
nav.mouseleave(function () {
    $(this).find("li").slideUp();
    });
}); 

你可以在这里看到它的作用

https://www.myccandbuilds.com/

Answer 1

此脚本侦听屏幕大小并为超过 600 像素和低于 600 像素进行正确设置

在您的 jQuery 代码中添加此代码：

$(window).on('resize load', function () {
    var win = $(this);
    if (win.width() <= 600) {
        $('#close').attr("style", "display:none;");
        $('#open').attr("style", "display:block;");
        $('#menu ul').attr("style", "display:none;");
    } else {
        $('#close').attr("style", "display:block;");
        $('#menu ul').attr("style", "display:block;");
    }
});