调整窗口大小时切换图标的可见性

Question

问题

我有一个下拉菜单，可在导航打开和关闭时在汉堡菜单和十字图标之间切换。但是，如果用户打开菜单，然后调整窗口大小并且窗口宽度仍然小于768px（仍然打开），它会显示两个图标堆叠在彼此之上，只显示十字架。

另外，我希望简化此Javascript代码段的复杂性。我不确定添加和删除一类is-visible是正确/最好的方法。

JSFiddle：https://jsfiddle.net/bdmebsu8/

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>

Answer 1

您可以采取哪些措施来简化脚本：

$(function(){
    function updateMenu(){

        // all logic in here for checking width and show/hide/set classes

    }

    updateMenu();  // runs on doc ready

    $(window).on("resize", updateMenu);
}