问题

我正试图写一个if语句，它可以实现以下功能：

• 关闭下拉菜单时显示.icon-menu，打开/可见下拉菜单时切换到.icon-cross
• 如果.nav__list--dropdown打开（显示十字图标）并且窗口宽度小于769px，则隐藏它**
• 如果单击打开.nav__list--dropdown，则保持其打开状态，并且用户调整窗口大小，但窗口宽度仍为768px或更低

我觉得我有重叠的if语句，这导致图标在不应该出现的时候出现。

scripts.js

$(function(){
    // Window size
    if ($(window).width() <= 768) {
        $(".icon-cross").hide();
        $(".icon-menu").addClass("is-visible");
        $(".icon-menu").show();
    } else {
        $(".icon-menu").hide();
        $(".icon-menu").removeClass("is-visible");
    }
    $(window).resize(function(){
        var w = $(this).innerWidth();
        if (w > 768) {
            $(".nav__list--dropdown").hide();
            $(".icon-cross").hide();
            $(".icon-menu").hide();
            $(".icon-cross").removeClass("is-visible");
            $(".icon-menu").removeClass("is-visible");
        } else {
            $(".icon-cross").hide();
            $(".icon-menu").show();
            $(".icon-menu").addClass("is-visible");
        }
    });
    // Dropdown menu
    $(".nav__menu").on("click", function(){
        $(".is-hidden").slideToggle("slow");
        var menuVisible = $(".icon-menu").hasClass("is-visible")
        if (menuVisible) {
            $(".icon-menu").removeClass("is-visible");
            $(".icon-menu").hide();
            $(".icon-cross").addClass("is-visible");
            $(".icon-cross").show();
        } else {
            $(".icon-cross").removeClass("is-visible");
            $(".icon-cross").hide();
            $(".icon-menu").addClass("is-visible");
            $(".icon-menu").show();
        }
    });
}); 

index.html

<div class="dropdown">
                <ul class="nav__list--dropdown is-hidden">
                    <a href="#services" class="nav__item" target="_blank"><li class="item--services--dropdown">Services</li></a>
                    <a href="#projects" class="nav__item" target="_blank"><li class="item--projects--dropdown">Projects</li></a>
                    <a href="#teaching" class="nav__item" target="_blank"><li class="item--teaching--dropdown">Teaching</li></a>
                    <a href="https://medium.com/@onlyandrewn" class="nav__item" target="_blank"><li class="item--blog--dropdown">Blog</li></a>
                    <a href="#contact" class="nav__item" target="_blank"><li class="item--contact--dropdown">Contact</li></a>
                </ul>
            </div>
<div class="nav__menu">
                    <img src="src/img/sm-menu.png" class="icon-menu" alt="Open Menu">
                    <img src="src/img/cross-dark.png" class="icon-cross" alt="Close Menu">
                </div>

潜在方法

$(function(){
    function updateMenu(){
        // all logic in here for checking width and show/hide/set classes
    }
    updateMenu();  // runs on doc ready
    $(window).on("resize", updateMenu);
}