setInterval和触发器问题。 javascript jquery

Question

我要做的是创建一个带有下拉菜单按钮的导航，但仅限于视口宽度小于600px时。我正在使用的代码有效，但我希望下拉菜单保持不变，直到屏幕大小超过600px。现在它一切正常，除非我单击下拉菜单然后更改它在单击之前重置的视口大小。有什么想法吗？

我的代码

$(function () {
        resizeOK = true,
        timer = setInterval(function () {
            resizeOK = true;
        }, 100);
        $(window).on('resize', function () {
            if (resizeOK) {
                resizeOK = false;
                if ($("#header").width() <= 600) {
                    $("#nav").hide();
                    $(".menu").show();
                    $(".menu2").hide();
                    $(".menu").click(function() {
                        $("#nav").show();
                        $(".menu").hide();
                        $(".menu2").show();
                        })
                    $(".menu2").click(function() {
                        $("#nav").hide();
                        $(".menu2").hide();
                        $(".menu").show();
                        })
                }
                else if ($("#header").width() >= 600) {
                    $("#nav").show();
                    $(".menu").hide();
                    $(".menu2").hide();
                }
            }
        }).trigger('resize')
    });