0

问题

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

附带说明一下，我只是想简化这个 Javascript 片段的复杂性。我不确定添加和删除一个类is-visible是正确/最好的方法。

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

脚本.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();
        }
    });
});

索引.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>
4

1 回答 1

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);
}
于 2016-04-14T17:10:33.260 回答